New Posts  All Forums:Forum Nav:

Need HTML/CSS help

post #1 of 9
Thread Starter 
Ok I bet the answer to this is really simple and im just being stupid.

Ok I am doing a menu topbar and i cant get them all to go one after the other

to see what i mean go to http://www.matthew-titmarsh.com

Here look at the footer and you can see that there is a list that goes horizontal and I cant remember the CSS code to get it to do this in the Menu feature. I will post the CSS code Below.


#Topbar{
overflow: hidden;
height: 65px;
background: 0 50px rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.3);
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(0,0,0,0.3);
text-shadow: 1px 1px 1px black
}

#Topbar ul li{
list-style:none;
padding:0px;
margin-bottom:12px;
}

#Topbar_menu{
list-style: none;
float: left;
font-size:20px;
font-family:Arial;
color:#ffffff;
padding: 0px 14px 14px 15px;
border-right:1px solid rgba(0,0,0,0.4);
background: rgba(0,0,0,0.1);
}

#Topbar_menu li a{
display: block;
color: #cccccc;
text-decoration: none;
}
post #2 of 9
change your li style to

display:inline-block;

biggrin.gif


#Topbar_menu li a{
display:inline-block;
color: #cccccc;
text-decoration: none;
}
Edited by Hckngrtfakt - 4/11/13 at 2:21pm
Pinky
(15 items)
 
GF's fav
(12 items)
 
Yup
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Q6700 Asus P5N-D BFG GeForce GTX 285 Patriot DDR2-800 (8GB) 
Hard DriveHard DriveOptical DriveCooling
WD VelociRaptor 74GB x2 (raid 0) Seagate XT 7200.1 500GB LG 10X Blu-ray Burner Corsair Hydro H60 
OSMonitorPowerCase
Win7 Pro LG LED E2250V Antec EA 750W Aspire X-Cruiser 
CPUMotherboardGraphicsRAM
AMD FX-8350 Asus M5A97 R2.0 GTX 780 ti 32GB Crucial DDR3 1600 
Hard DriveHard DriveOptical DriveCooling
500Gb WD5000aaks 750Gb Samsung HD753LJ  Pioneer BDR-208DBK CM Hyper 212 evo 
OSMonitorPowerCase
Win 7 Pro x64 Asus VE258 LED 850w Zalman ZM850-HP ENERMAX Chakra Blue 
  hide details  
Reply
Pinky
(15 items)
 
GF's fav
(12 items)
 
Yup
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Q6700 Asus P5N-D BFG GeForce GTX 285 Patriot DDR2-800 (8GB) 
Hard DriveHard DriveOptical DriveCooling
WD VelociRaptor 74GB x2 (raid 0) Seagate XT 7200.1 500GB LG 10X Blu-ray Burner Corsair Hydro H60 
OSMonitorPowerCase
Win7 Pro LG LED E2250V Antec EA 750W Aspire X-Cruiser 
CPUMotherboardGraphicsRAM
AMD FX-8350 Asus M5A97 R2.0 GTX 780 ti 32GB Crucial DDR3 1600 
Hard DriveHard DriveOptical DriveCooling
500Gb WD5000aaks 750Gb Samsung HD753LJ  Pioneer BDR-208DBK CM Hyper 212 evo 
OSMonitorPowerCase
Win 7 Pro x64 Asus VE258 LED 850w Zalman ZM850-HP ENERMAX Chakra Blue 
  hide details  
Reply
post #3 of 9
Thread Starter 
No its not changed it, it still looks the same
post #4 of 9
try posting it here

http://jsfiddle.net/
Pinky
(15 items)
 
GF's fav
(12 items)
 
Yup
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Q6700 Asus P5N-D BFG GeForce GTX 285 Patriot DDR2-800 (8GB) 
Hard DriveHard DriveOptical DriveCooling
WD VelociRaptor 74GB x2 (raid 0) Seagate XT 7200.1 500GB LG 10X Blu-ray Burner Corsair Hydro H60 
OSMonitorPowerCase
Win7 Pro LG LED E2250V Antec EA 750W Aspire X-Cruiser 
CPUMotherboardGraphicsRAM
AMD FX-8350 Asus M5A97 R2.0 GTX 780 ti 32GB Crucial DDR3 1600 
Hard DriveHard DriveOptical DriveCooling
500Gb WD5000aaks 750Gb Samsung HD753LJ  Pioneer BDR-208DBK CM Hyper 212 evo 
OSMonitorPowerCase
Win 7 Pro x64 Asus VE258 LED 850w Zalman ZM850-HP ENERMAX Chakra Blue 
  hide details  
Reply
Pinky
(15 items)
 
GF's fav
(12 items)
 
Yup
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Q6700 Asus P5N-D BFG GeForce GTX 285 Patriot DDR2-800 (8GB) 
Hard DriveHard DriveOptical DriveCooling
WD VelociRaptor 74GB x2 (raid 0) Seagate XT 7200.1 500GB LG 10X Blu-ray Burner Corsair Hydro H60 
OSMonitorPowerCase
Win7 Pro LG LED E2250V Antec EA 750W Aspire X-Cruiser 
CPUMotherboardGraphicsRAM
AMD FX-8350 Asus M5A97 R2.0 GTX 780 ti 32GB Crucial DDR3 1600 
Hard DriveHard DriveOptical DriveCooling
500Gb WD5000aaks 750Gb Samsung HD753LJ  Pioneer BDR-208DBK CM Hyper 212 evo 
OSMonitorPowerCase
Win 7 Pro x64 Asus VE258 LED 850w Zalman ZM850-HP ENERMAX Chakra Blue 
  hide details  
Reply
post #5 of 9
Thread Starter 
http://jsfiddle.net/matteymoo2/Am9XV/

Ok i added it to the site and thanks for that the site will be a great help in tidying my code.
post #6 of 9
Thread Starter 
Ah ha pretty much sorted it i have a minor issue now but i know how to resolve it thanks any way my resolved code is below for anyone wanting to use it.

#Topbar {
overflow: hidden;
height: 65px;
background: 0 50px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 1px black
}
#Topbar ul li {
list-style:none;
padding:0px;
margin-bottom:12px;
}
#Topbar_menu {
margin: 0;
padding: 0;
width:auto;
}
#Topbar_menu li {
display:inline-block;
color: #cccccc;
text-decoration: none;
}
#Topbar_menu {
list-style: none;
float: left;
font-size:20px;
font-family:Arial;
color:#ffffff;
padding: 0px 14px 14px 15px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}

#Topbar a{
display: inline-block;
letter-spacing: 1px;
margin: 0px 10px;
padding: 10px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Arvo', serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
border: none;
}







http://jsfiddle.net/matteymoo2/dWBKY/
post #7 of 9
Glad it worked, sorry i couldn't debug it redface.gif

besides that fiddle one, this one's pretty helpful too

http://www.cssportal.com/css3-menu-generator/
Pinky
(15 items)
 
GF's fav
(12 items)
 
Yup
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Q6700 Asus P5N-D BFG GeForce GTX 285 Patriot DDR2-800 (8GB) 
Hard DriveHard DriveOptical DriveCooling
WD VelociRaptor 74GB x2 (raid 0) Seagate XT 7200.1 500GB LG 10X Blu-ray Burner Corsair Hydro H60 
OSMonitorPowerCase
Win7 Pro LG LED E2250V Antec EA 750W Aspire X-Cruiser 
CPUMotherboardGraphicsRAM
AMD FX-8350 Asus M5A97 R2.0 GTX 780 ti 32GB Crucial DDR3 1600 
Hard DriveHard DriveOptical DriveCooling
500Gb WD5000aaks 750Gb Samsung HD753LJ  Pioneer BDR-208DBK CM Hyper 212 evo 
OSMonitorPowerCase
Win 7 Pro x64 Asus VE258 LED 850w Zalman ZM850-HP ENERMAX Chakra Blue 
  hide details  
Reply
Pinky
(15 items)
 
GF's fav
(12 items)
 
Yup
(12 items)
 
CPUMotherboardGraphicsRAM
Intel Q6700 Asus P5N-D BFG GeForce GTX 285 Patriot DDR2-800 (8GB) 
Hard DriveHard DriveOptical DriveCooling
WD VelociRaptor 74GB x2 (raid 0) Seagate XT 7200.1 500GB LG 10X Blu-ray Burner Corsair Hydro H60 
OSMonitorPowerCase
Win7 Pro LG LED E2250V Antec EA 750W Aspire X-Cruiser 
CPUMotherboardGraphicsRAM
AMD FX-8350 Asus M5A97 R2.0 GTX 780 ti 32GB Crucial DDR3 1600 
Hard DriveHard DriveOptical DriveCooling
500Gb WD5000aaks 750Gb Samsung HD753LJ  Pioneer BDR-208DBK CM Hyper 212 evo 
OSMonitorPowerCase
Win 7 Pro x64 Asus VE258 LED 850w Zalman ZM850-HP ENERMAX Chakra Blue 
  hide details  
Reply
post #8 of 9
Thread Starter 
Cool thanks +1

and you did help i was able to take what you said and it made my brain click what was wrong.
post #9 of 9
I would use:
Code:
display: table-cell;

I've had much better results with this.

http://jsfiddle.net/matteymoo2/Am9XV/
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding