| View previous topic :: View next topic |
| Author |
Message |
OSIRIS
Grandmaster Cheater
![]() Reputation: 0
Joined: 27 Aug 2006
Posts: 654
|
 Posted: Mon Oct 13, 2008 11:35 am Post subject: How did this guy do this navigation menu. |
 |
|
http://www.stefon.info/Welcome.htm
Note that this guys website is not mine -.-
I like the drop down menu style. How did he do that, I examinded the source but I can't find it.
|
|
| Back to top |
|
 |
kitterz
Grandmaster Cheater Supreme
![]() Reputation: 0
Joined: 24 Dec 2007
Posts: 1268
|
| Posted: Mon Oct 13, 2008 11:42 am Post subject: |
|
|
lol its a french photo site! Good thing I understand french! =p
As an amature at website-making, to me it looks like flash.
_________________
|
|
| Back to top |
|
|
OSIRIS
Grandmaster Cheater
![]() Reputation: 0
Joined: 27 Aug 2006
Posts: 654
|
| Posted: Mon Oct 13, 2008 11:44 am Post subject: |
|
|
| kitterz wrote: | lol its a french photo site! Good thing I understand french! =p
As an amature at website-making, to me it looks like flash. |
Nope it is not flash. I think it is just advanced CSS, but im not sure.
Last edited by OSIRIS on Mon Oct 13, 2008 11:47 am; edited 1 time in total |
|
| Back to top |
|
|
sinsgift
Cheater
 Reputation: -1
Joined: 16 Aug 2007
Posts: 43
Location: behind you
|
| Posted: Mon Oct 13, 2008 11:47 am Post subject: |
|
|
it looks like crap, fuck that drop down shit
_________________
Watch out im out to get you...
 |
|
| Back to top |
|
|
TraxMate
Master Cheater
![]() Reputation: 0
Joined: 01 Mar 2008
Posts: 363
|
| Posted: Mon Oct 13, 2008 12:17 pm Post subject: |
|
|
| I think it's CSS and it's probably in an extern file so looking at the source wont help.
|
|
| Back to top |
|
|
deleted user 111213
Grandmaster Cheater
![]() Reputation: 0
Joined: 09 Nov 2007
Posts: 714
|
| Posted: Mon Oct 13, 2008 1:21 pm Post subject: |
|
|
yes but they have to load the external sheet into a html file, therefore the filename would be on the list.ill take a look and find the css code.
EDIT:here is the css
| Code: |
/*#############################################################
© 2007
Author: Stefon Photographie
URL: http://stefon.info
#############################################################*/
/* default elements */
*{margin:0px;padding:0px}
h1
{
font-family:arial, verdana, helvetica, sans-serif;
font-size:1.9em;
font-weight: bold;
color:#333333;
line-height:1.6em
}
p
{
font-family:Verdana, Arial, helvetica, sans-serif;
font-size:0.8em;
font-weight: normal;
color:#5b5b5b;
padding-left:5px;
line-height:1.6em
}
.quote
{
font-family:Verdana, Arial, helvetica, sans-serif;
font-style: italic;
margin-left:0px;
padding-left:0px;
padding-top:0px;
line-height:1.6em;
float:left;
}
.right
{
background-color:black;
float:right;
}
a
{
color:#467AA7;
font-size:0.9em;
font-weight:normal;
font-style:normal;
text-decoration:none;
}
a:link
{
color:#467AA7;
font-weight:normal;
font-style:normal;
text-decoration:none;
}
a:visited
{
color:#467aa7;
font-style:normal;
font-weight:normal;
text-decoration:none;
}
a:hover
{
color:#ff6600;
font-style:normal;
text-decoration:none;
}
/* Layout */
body
{
margin: 0;
padding:0;
font-family: Verdana,'Lucida Grande', Verdana, Helvetica, sans-serif;
background-image: url(img/bg.jpg);
background-repeat: repeat-x;
background-color:#ffffff;
list-style:none;
}
#wrapper
{
margin-top: 0pt;
margin-right: auto;
margin-bottom: 0pt;
margin-left: auto;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
width:1000px;
background:transparent;
}
#header
{
width: 950px;
background: url(bg.jpg) repeat-x;
}
#header .logo
{
float:left;
padding-top:0px;
padding-left:45px;
border: none;
}
#menu {list-style-type:none; margin:0 0 100px 0; padding:0;}
#menu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;}
#menu li span {display:block; z-index:100; padding: 1px 25px; font-size:1em;}
#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background:transparent url(../opacity/opaque.png);}
* html #menu dl {background:transparent url(../opacity/opaque.gif);}
#menu dt {margin:0; font-size: 1em; clear:left;}
#menu dd {display:none; background: transparent; color: #fff; font-size: 0.8em; text-align:left;}
#menu dt a, #menu dt a:visited {display:block; color:#fff; padding: 0px 10px; text-decoration:none;}
#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding: 5px 10px;}
#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:0px;}
#nav ul
{
display:block;
float:left;
position:relative;
margin-left:30px;
margin-top:35px;
list-style:none;
}
#nav li
{
margin-bottom:0px;
padding-bottom:0px;
padding-right:1px;
}
#nav ul li a
{
float:left;
border-left:4px solid #858383;
display:block;
margin-right:1px;
padding-right:25px;
padding-left:5px;
padding-top:10px;
padding-bottom:10px;
color: #ffffff;
font-weight: normal;
font-size: 0.9em;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
#nav li a:hover
{
color: #ffffff;
border-left:4px solid #facd00;
}
#nav .selected {
color: #ffffff;
border-left:4px solid #facd00;
}
#content
{
float:left;
background-color:transparent;
margin-top:0px;
margin-bottom:0px;
padding:10px;
width:1000px;
border-bottom:1px solid #eaeaea;
}
#col1
{
float:left;
background-color:transparent;
margin-left:100px;
margin-top:20px;
margin-bottom:5px;
padding:10px;
width: 1000px;
border-right-width: thin;
border-right-style: none;
border-right-color: #000000;
}
#col1 p
{
font-size:0.8em;
padding:0 20px 20px 0;
color:#555555;
}
#col1 h1
{
font-family:Arial, verdana, helvetica, sans-serif;
font-size:1.4em;
color: #6d6d6d;
font-weight:normal;
padding-bottom:10px;
}
#boxcontainer
{
float:left;
clear:both;
background-color:transaprent;
margin-top:0px;
margin-bottom:15px;
padding:10px;
width: 920px;
}
.box1
{
width:167px;
float:left;
margin-left:0px;
padding-right:5px;
margin-top: 8px;
padding-left: 20px;
padding-top: 0px;
padding-bottom:8px;
border-right:1px dotted #dadada;
}
.box1 p
{
font-size:0.7em;
padding-top:10px;
padding-left:10px;
padding-right:10px;
color:#555555;
}
.box1 h1
{
background-image:url(Img/one.gif);
background-repeat:no-repeat;
background-position:top left;
display:block;
font-family: 'Trebuchet MS';
font-size:1em;
padding-top:0px;
padding-left:30px;
color:#619fde;
}
.box2
{
width:167px;
float: left;
margin-left:25px;
margin-top: 8px;
padding-right:5px;
padding-left: 20px;
padding-top: 0px;
padding-bottom:8px;
border-right:1px dotted #dadada;
}
.box2 p
{
padding-top:10px;
padding-left:4px;
padding-right:10px;
color:#555555;
font-size:0.7em;
}
.box2 h1
{
background-image:url(Img/two.gif);
background-repeat:no-repeat;
background-position:top left;
display:block;
font-family: 'Trebuchet MS';
font-size:1em;
padding-top:0px;
padding-left:30px;
color:#619fde;
}
.box3
{
width:167px;
float:left;
margin-top: 8px;
padding-left: 20px;
margin-left:25px;
padding-top: 0px;
padding-bottom:8px;
}
.box3 p
{
font-size:0.7em;
padding-top:10px;
padding-left:4px;
padding-right:10px;
color:#555555;
}
.box3 h1
{
background-image:url(Img/three.gif);
background-repeat:no-repeat;
background-position:top left;
font-family: 'Trebuchet MS';
font-size:1em;
padding-top:0px;
color:#619fde;
padding-left:30px;
}
#footer
{
clear: both;
margin-right: 0px;
margin-bottom:0px;
margin-left: 0px;
padding:8px;
background-color:#000000;
text-align:center;
}
#footer p
{
font-size: 0.7em;
line-height:3em;
font-family: arial;
font-weight: normal;
color: #5b5b5b;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
text-align: center;
}
#footer a
{
font-size: 1em;
font-weight: normal;
color: #facd00;
text-align: center;
}
#footer a:hover
{
text-decoration: underline;
font-weight: normal;
color: #facd00;
text-align: center;
}
|
|
|
| Back to top |
|
|
HolyBlah
Master Cheater
![]() Reputation: 2
Joined: 24 Aug 2007
Posts: 446
|
| Posted: Mon Oct 13, 2008 1:36 pm Post subject: |
|
|
| Here is a tutorial for that:http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
|
|
| Back to top |
|
|
OSIRIS
Grandmaster Cheater
![]() Reputation: 0
Joined: 27 Aug 2006
Posts: 654
|
| Posted: Mon Oct 13, 2008 6:33 pm Post subject: |
|
|
What CSS in there will affect the drop down menu, I looked and this was all I found.
| Code: | a:hover
{
color:#ff6600;
font-style:normal;
text-decoration:none;
} |
|
|
| Back to top |
|
|
kittonkicker
I post too much
 Reputation: 1
Joined: 19 Apr 2006
Posts: 2171
|
| Posted: Tue Oct 14, 2008 12:39 pm Post subject: |
|
|
Right click->View source then delete until what you want doesn't work... then re-add it.
_________________
All gone  |
|
| Back to top |
|
|
OSIRIS
Grandmaster Cheater
![]() Reputation: 0
Joined: 27 Aug 2006
Posts: 654
|
| Posted: Tue Oct 14, 2008 1:11 pm Post subject: |
|
|
| kittonkicker wrote: | | Right click->View source then delete until what you want doesn't work... then re-add it. |
That is a pretty big CSS file. So I just decided to learn CSS.
|
|
| Back to top |
|
|
Trow
Grandmaster Cheater
 Reputation: 2
Joined: 17 Aug 2006
Posts: 957
|
| Posted: Sat Oct 18, 2008 10:54 am Post subject: |
|
|
#menu li:hover dd, #menu li a:hover dd {display:block;}
^ That line
_________________
Get kidnapped often. |
|
| Back to top |
|
|
thephoneguy
Grandmaster Cheater
 Reputation: 1
Joined: 17 Mar 2007
Posts: 873
|
| Posted: Sun Oct 19, 2008 4:45 am Post subject: |
|
|
LoL this is very simple css. What your looking for in the css is
| Code: | xxx
{
xxx
xxx
border-left: thick #54657987
}
|
Edit: Found it
| Code: |
#nav ul li a
{
float:left;
border-left:4px solid #858383;
display:block;
margin-right:1px;
padding-right:25px;
padding-left:5px;
padding-top:10px;
padding-bottom:10px;
color: #ffffff;
font-weight: normal;
font-size: 0.9em;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
[color=orange]
#nav li a:hover
{
color: #ffffff;
[color
border-left:4px solid #facd00;
}
[/color]
|
_________________
If you see me posting referring to an earlier conversation 9/10 times it was in the chatbox at baby  .
 |
|
| Back to top |
|
|
--Pillboi--
Grandmaster Cheater Supreme
 Reputation: 0
Joined: 06 Mar 2007
Posts: 1383
Location: I don't understand the question. Is this a 1 to 10 thing?
|
| Posted: Sun Oct 19, 2008 5:41 am Post subject: |
|
|
Surely this is all the code you need:
| Code: | #menu {list-style-type:none; margin:0 0 100px 0; padding:0;}
#menu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;}
#menu li span {display:block; z-index:100; padding: 1px 25px; font-size:1em;}
#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background:transparent url(../opacity/opaque.png);}
* html #menu dl {background:transparent url(../opacity/opaque.gif);}
#menu dt {margin:0; font-size: 1em; clear:left;}
#menu dd {display:none; background: transparent; color: #fff; font-size: 0.8em; text-align:left;}
#menu dt a, #menu dt a:visited {display:block; color:#fff; padding: 0px 10px; text-decoration:none;}
#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding: 5px 10px;}
#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:0px;}
#nav ul { display:block; float:left; position:relative; margin-left:30px; margin-top:35px; list-style:none; }
#nav li { margin-bottom:0px; padding-bottom:0px; padding-right:1px; }
#nav ul li a { float:left; border-left:4px solid #858383; display:block; margin-right:1px; padding-right:25px; padding-left:5px; padding-top:10px; padding-bottom:10px; color: #ffffff; font-weight: normal; font-size: 0.9em; text-decoration: none; font-family:Arial, Helvetica, sans-serif; }
#nav li a:hover { color: #ffffff; border-left:4px solid #facd00; }
#nav .selected { color: #ffffff; border-left:4px solid #facd00; } |
_________________
 
Enter darkness, leave the light, Here be nightmare, here be fright...
Earth and Water, Fire and Air. Prepare to meet a creature rare.
Enter now if you dare, Enter now the dragon's lair. |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
