cssLearner
Members
-
Joined
-
Last visited
Everything posted by cssLearner
-
but you were right about the extra div Tanks
-
Oops nevermind, i was editing the wrong css file. had two, one pointed to the admin section and the other to the public section.
-
Im making a site and all is going ok, excpet i cant get one of the divs to format. Here is the generted html code after the php has run <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title> gfgdfgfdg </title> </head> <body> <div id = "mainWrapper"> <div id = "header"></div> <div class = 'cc'><div class = 'ArticlesPageHeader'> <div class = 'ArticlePageHeaderLink'> <a href = 'articlecp.php?a=1'> All Articles </a> <a href = 'articlecp.php?a=2'> New Article </a> <a href = 'articlecp.php?a=3'> Delete or Edit Article </a></div></div></div></body></html> The ArticlesPageHeader div and the ArticlePafeLink are the divs i cant get to formwat, mainwrapper and header format as normal the css .ArticlesPageHeader{ background-color: black; border: 1px solid red; } Cant figure out whats wrong
-
Hi, im really stuck, im trying to use php includes to build my index.php page and then have that page formatted by the stylesheet. However im running into trouble formatting lists and basically aything thats not in the first include. Its just not working. Here are my files Index.php <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id = "wrapper"> <?php include("tpl_header.php"); include("lcol.php"); ?> </div> </body> </html> tpl_header.php <div id = "Header"> <div class="toplinks"><a href="#">Home</a> <a href="#">Contact</a> <a href="#">About</a> </div> <div id="logo"></div> </div> </div> lcol.php <div id ="lcol"> <div class ="lnav"> <div class ="lnavHdr">Title</div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Me</a></li> </ul> </div> </div> style.css #wrapper{ width: 1000px; margin-left: 150px; margin-right: auto; } #header { width: 1000px; float: left; } .toplinks { width: 1000px; height: 20px; border: 1px solid black; } .toplinks a { padding-left: 15px; text-decoration: none; font-size: 8Pt; float: right; } #logo { width: 1000px; height: 150px; border: 1px solid blue; } #lnav{ width: 200px; float: left; border: 1px solid red; } #lnav ul { list-style:none; } #lnav ul li { border: 0px; padding: 0px; } #lnav ul li a { text-decoration: none; font-size: 8Pt; } Basically the only thing getting formatted is toplinks. The rest is just random and it wont even follow out the list-design: none command
-
For some reason it wont display correctly in either mozilla or i.e and i have triple checked everything. its the horizontal ist in .navlinkstop > .topnav even though ive set the height to 25px and have a background image of 25px the display isnt even and when i add a border to see whats going wrong .navlinks top is about twice the height of .topnav. I cant work it out. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Website Title V1.0</title> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="wrapper"> <div class = "toplinks"><div class ="tlcon"><a href="#">Home</a><a href="#">Contact</a> <a href="#">About</a><a href="#">Terms & Conditions</a></div></div> <div class ="logobit"></div> <div class="navlinkstop"> <div class="topnav"> <ul> <li><a href="#">TopNav</a></li> <li><a href="#">TopNav</a></li> <li><a href="#">TopNav</a></li> <li><a href="#">TopNav</a></li> <li><a href="#">TopNav</a></li> </ul> </div> </div> <div id = "lcol"> <div id="navleft"> <div class = "navleftheader"></div> <div class= "navleftlistbox"> <ul> <li><a href="#">Home</a> <ul> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> </ul> </li> <li><a href="#">Projects</a> <ul> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> </ul> </li> <li><a href="#">Qualifications</a> <ul> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> <li><a href="#">inner link</a></li> </ul> </li> </ul> </div> </div> </div> <div id = "ccol"> <div id = "ccolhdr"><div class="hdrtxt">My Previous Work</div></div> <div id ="cleft"><a href="#"><img src="bargainpcs.jpg"/></a> <a href="#"><img src="bargainpcs.jpg"/></a> <a href="#"><img src="bargainpcs.jpg"/></a></div> <div id ="cright"> <p>This was the first site i worked on. It was designed as an ecommerse site to sell computer components. To build this site i worked with Zen Cart and created my own template using PHP, CSS and HTML</p> <br> <br> <p>This was the first site i worked on. It was designed as an ecommerse site to sell computer components. To build this site i worked with Zen Cart and created my own template using PHP, CSS and HTML</p> <br> <p>This was the first site i worked on. It was designed as an ecommerse site to sell computer components. To build this site i worked with Zen Cart and created my own template using PHP, CSS and HTML</p> </div> </div> <div id = "footer"></div> <div id = "Copyw"><div class="cw">Copywrite 2008 Robe Technology:: <a href="www.edealbase.co.uk"> Web Design Specialists</a></div></div> </div> </body> </html> #wrapper { margin-left: 100px; margin-right: auto; width: 1000px; } .toplinks { width: 1000px; float:left; height: 20px; border: 1px solid #6d6969; } .tlcon { float: right; } .tlcon a { text-decoration: none; font-size: 9pt; font-family: verdana; font-weight: bold; color: #38b8bd; padding-right: 15px; } .logobit { width: 1000px; float: left; height: 150px; background-image: url(logo.png); } .navlinkstop{ width: 1000px; float: left; height: 25px; background-image: url(bk.gif); background-repeat: repeat-x; border: 1px solid #a4b2bc; } .topnav { height: 25px; } .topnav ul { margin 0; padding 0; } .topnav ul li { display: inline; border: 1px solid #a4b2bc; padding-left: 20px; padding-right: 20px; } .topnav ul li a { text-decoration: none; font-size: 12pt; font-family: 'orator std'; color: #364149; font: weight: bold; } .topnav ul li a:hover { color: #79b8b4; } #navleft { width: 150px; float: left; } .navleftheader { width: 150px; } .navleftlistbox { width: 150px; } .navleftlistbox ul { list-style: none; } .navleftlistbox ul li { } .navleftlistbox li li { } .navleftlistbox ul li a { text-decoration: none; font-size: 9pt; font-family: verdana; font-weight: bold; color: #38b8bd; border-bottom: 1px solid #6d6969; width: 100%; display: block; padding-top: 10px; } .navleftlistbox li li a { font-weight: normal; color: #6d6969; border: none; padding-left: 0px; padding-top: 5px; padding-bottom: 5px; } .navleftlistbox li li a:hover { font-weight: bold; background-color: #d5f4f7; color: #4a4646; } .navleftlistbox li ul { margin: 0px; padding: 0px; } #ccol { width: 845px; float: left; } #ccolhdr{ width: 845px; float: left; font-size: 12pt; font-family: verdana; font-weight: normal; color: #6d6969; } .hdrtxt { font-size: 12pt; font-family: verdana; font-weight: normal; color: #6d6969; padding-left: 70px; padding-top: 5px; padding-bottom: 19px; } #cleft{ padding-left: 25px; width: 320px; float:left; } #cleft img{ } .lft{ padding: 15px; } .rit{ padding: 15px; } #cright{ width: 420px; float: left; } #cright p { font-size: 10pt; font-weight: bold; font-family: verdana; color: #6d6969; } #footer { width: 1000px; height: 100px; float: left; background-color: #e3eff8; border: 1px solid #6d6969; } #Copyw { width: 1000px; height: 30px; float: left; clear: both; } .cw{ font-size: 7pt; font: weight: bold; font-face: verdana; color: #3f4142; text-align: center; }
-
Hey thanks, i already have mysql and php set up in my ubuntu machine. So i guess thats the best thing to use. Its just that i was reading w3 schools and they seem to be more in favour of asp and ajax seems to be the next big thing?? I do have a slight worry with php regarding safety though, i created a database, but to connect to the mysql database in php you need to use the root password. Isnt it dangerous having a webpage with the root password hardcoded into it? How can you get around this? Or can people not see the password in php files?
-
Ok, so i can make relativly nice sites and do basically everything i want using css and html. So if im serious about web design where do i go next. To be honest it was something i was looking to get into, but i just had a look at w3 schools and there is so much to learn that its put me off a bit to be honest. Asp PHP AJAX VBS javascript etc i make small websites just with hover list effects etc and images to make it look good. I need to know which is my way forward. Also i need a basic project to do with the new language. I think my best chance of learning is if i am working on a project, and need to use that language a little bit in that project. Can you suggest a language and what i could do with it. Obviously i dont want anything to complex or ill just get frustrated and stop.
-
I personally start basic with the layout, i.e header, left colum, center colum, footer. Set the sizes i want. Then id work on the left colum and put in a nav list, then id divide up the center colum in different ways depending on site and then add pics and content. usually leave the logo to the end.
-
Actually, another quick question about the links. Ive got the hover working and i have dropped the image beside the list. The hover is covering the full length of li and li a which are the same length. The ul is set to 150pxs and i want the li and lia to span 150px too so the background color spans the whole length, but i cant do that. if i look at web developer, i can see that the ul is set to 150px and displays properly, but even though li a and li are set to a width of 150px too they dont display in the same width as the ul. there seems to be some sort of indent that i cannot get rid off. index.htm style.css
-
Thats it working now thanks. Just a quick question though. I have an image beside the link in the list. when it hovers the image disappears, i take it there is no way around this?
-
i tried it your way, and all that happened was i lost all formatting on the links. Then i changed back to my original and the link formatting came back, and then i replaced the class lnav with id lnav and its the same as before. is there some sort of rule to making this work im missing out on? Ive attached both files for more help index.htm style.css
-
So basically, it needs to be an id rather than a class?
-
I copied some code in a seperate file and can get this to work fine. However whenever i try to apply it to this site im already building it wont work. HTML - This is how make the list of links <div id="leftSide"> <div class="lNav"> <div class="lNavHeader"><div class="lnavTitle">Articles</div></div> <ul> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> </ul> </div> </div> Here is the css to try and make it get the hover effect .lNav ul { list-style: none; } .lNav li { background-image: url(i.gif); background-repeat: no-repeat; padding-bottom: 10px; } .lNav a{ display: block; padding-left: 20px; text-decoration: none; font-size: 0.9em; color: #093a33; font-weight: bold; } .lNav a: hover { background-color: #369; color: #fff; } .lNav a: link, .lNav a: visited{ }
-
Hey me again. Ive decided to try a new site, using proper coding. This time in a fixed size to stop things distorting. I think i done it perfectly, but recently for some reason the footer just stoped showing up in firefox. I.E http://i26.tinypic.com/2rrvxc7.jpg Moz http://i29.tinypic.com/1zmk1gj.jpg body{ margin-left: 150px; background-color: #ffffff; } #oWrapper{ margin:0 auto; width:850px; height:auto; } #header{ height: 100px; width: 800px; background-image: url(logo.jpg); background-repeat: no-repeat; background-color: #2b4c2d; border: 1px solid #434b35; border-bottom: none; } .headerlogo{ /*background-image: url(logo.jpg); background-repeat: no-repeat;*/ } #leftSide{ float: left; width: 150px; height: 500px; border-right: 1px solid #434b35; background-color: #ffffff; } .lNav ul { list-style: none; } .lNav li { background-image: url(i.gif); background-repeat: no-repeat; padding-bottom: 10px; } .lNav ul li a{ padding-left: 20px; text-decoration: none; font-size: 0.9em; color: #093a33; font-weight: bold; } .lNavHeader{ height: 80px width: 100px; /*background-image: url(lnavheaderbg.gif); background-repeat: repeat-x;*/ padding-top:20px; } .lnavTitle{ color: #253230; font-family: 'lucida sans'; font-weight: bold; font-size: 10px; padding-top: 5px; padding-bottom: 5px; text-align: center; } #content{ float: left; width: 650px; height: 400px; background-color: #e7fae9; border-right: 1px solid #434b35; } .newsBox1, .newsBox3{ margin-left: 12px; } .newsBox1, .newsBox2{ Width: 300px; Height: 200px; /*border : 1px solid #434b35;*/ float: left; } .newsBox3, .newsBox4{ Width: 300px; Height: 200px; /*border : 1px solid #434b35;*/ float: left; } .newsBoxPic{ float:left; width: 110px; height: 150px; border-top : 2px solid #434b35; /* border-bottom : 1px solid #434b35;*/ margin-left: 4px; margin-top: 25px; } .newsBoxPic img{ padding-top: 25px; padding-left: 5px; } .newsBoxInfo{ float: right; width: 170px; height: 150px; border-top : 2px solid #434b35; /*border-bottom : 1px solid #434b35;*/ margin-right: 4px; margin-top: 25px; } .newsBoxInfo h1{ font-size: 9pt; font-weight: bold; font-family: Tahoma; color: #686868; padding-left: 10px; padding-top: 25px; line-height: 14pt; } .newsBoxInfo p { font-size: 9pt; font-family: Tahoma; color: #686868; padding-left: 10px; line-height: 14pt; } #content2{ float: left; width: 650px; height: 100px; background-color: #e7fae9; border-right: 1px solid #434b35; border-bottom: none; } #footer{ width: 800px; height: 100px; background-color: #d4e7b2; border: 1px solid #434b35; float: left margin-left: 200px; } .ftLinks a { font-family: Tahoma; font-size: 9pt; font-weight: bold; text-decoration: none; color: #686868; text-align: center; } html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fixed Size Page</title> <link rel="stylesheet" href="style.css"/> </head> <body> <div id ="oWrapper"> <div id="header"><div class="headerlogo"></div></div> <div id="leftSide"> <div class="lNav"> <div class="lNavHeader"><div class="lnavTitle">Articles</div></div> <ul> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> <li><a href="newpage.html">Home</a></li> </ul> </div> </div> <div id ="content"> <div class="newsBox1"> <div class="newsBoxPic"><img src="pic1.jpg"></img></div> <div class="newsBoxInfo"> <h1>Live Match Center</h1> <p> An inside look at live scores and results</P> </div> </div> <div class="newsBox2"> <div class="newsBoxPic"><img src="pic2.jpg"></img></div> <div class="newsBoxInfo"> <h1>Action Gallery</h1> <p> All the action in here</P> </div> </div> <br> <div class="newsBox3"> <div class="newsBoxPic"><img src="pic3.jpg"></img></div> <div class="newsBoxInfo"> <h1>Top Trys</h1> <p> The top 10 Tries Scored by the Irish Rugby Team</P> </div> </div> <div class="newsBox4"> <div class="newsBoxPic"><img src="pic4.jpg"></img></div> <div class="newsBoxInfo"> <h1>Luke Fitzgerald</h1> <p> An interview with Irelands brightest alents</P> </div> </div> </div> <div id="content2"></div> <div id="footer"> <div class="ftLinks"><center> <a href="#">Home</a> :: <a href="#">Rugby</a> :: <a href="#">About</a> :: <a href="#">More</a> </center></div> </div> </div> </body> </html> Thanks
-
Pat thats perfect, Your a legend
-
Yea i sort of got it working now, everything fits on both mozilla and i.e apart from the header, which responds different to the command margin-left: 12%; different in i.e than in mozilla. Thats not really important though. The thing im noticing now, is that with a liquid design it trys to fit everything onto screen. Is there a command you can add so that when you make the browser window smaller, the items stay the same size and a horizontal scroll bar appears. i just dont want everything to distort. BTW this part of the question is for a new build im going to do, so ill be starting from scratch, so you dont have to add it to the code ive already posted. Thanks.
-
goldstien - good name by the way, Ari goldstien from entourage is the greatest character ever!!! I changed from a liquid design too a fixed pixel design because i liquid was annoying me, but i still have problems i posted the other thead. Thanks
-
Hey thanks for the reply, i tried this and its made some changes but its not right. Here is what it looks like now in i.e http://i31.tinypic.com/14ecuma.jpg in moz http://i31.tinypic.com/fd67wp.jpg I appreciate the help.
-
I couldnt get it working propely after my last thread, so i decided to switch from a liquid layout to a set layout. However my formatting is even more messed up, im really going crazy here because i cant fix this. css body { margin-left: 150px; margin-right: 150px; padding: 0px; text-align: center; background: #ffffff; } #header { background-image: url(logo.jpg); repeat: no-repeat; width: 850px; height: 100px; } #leftcol { background: #FFF;/*e2f5e1*/ float: left; width: 150px; height: 500px; border-top: 1px solid #97ae95; /*border-bottom: 2px solid #97ae95;*/ } #leftcol a, ul { list-style-image: url(i3.gif); text-align: left; text-decoration: none; line-height: 20px; font-size: 1em; font-family: 'franklin gothic medium'; color: #14400e; } #lcTitle{ color: #729f70; font-family: 'lucida sans'; font-weight: bold; } #rightcol { background: #fff; float: right; width: 200px; height: 500px; border-top: 1px solid #97ae95; border-bottom: 0px solid #97ae95; } #content { background: #fff; width: 500px; height: 400px; border: 1px solid #97ae95; border-left: none; border-right: none; } #conBoxTitle{ font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; margin-left: 10px; margin-top: 10px; color: #8a2733; } #conBoxCost{ font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; margin-left: 10px; } #conBox1{ margin: 10px; background-image: url(bg.jpg); repeat: no-repeat; height =211px; width = 250px; float: left; } #conBox2{ margin: 10px; background-image: url(bg.jpg); repeat: no-repeat; height =211px; width = 300px; float: left; } #conBox3{ margin: 10px; background-image: url(bg.jpg); repeat: no-repeat; height =211px; width = 250px; float:left; } #conBox1 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox2 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox3 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #ImG{ margin 10px; height = 100px; width = 100px; border: 1px solid #596575; margin-left: 30px; margin-top: 10px; } #adbox1{ margin: 10px; background:#D4DDFF; color: #ffffff; font-family:'franklin gothic medium'; } #adbox2{ margin: 10px; background:#D4DDFF; color: white; font-family:'franklin gothic medium'; } #adbox3{ margin: 10px; background:#D4DDFF; color: #ffffff; font-family:'franklin gothic medium'; } #content2{ background: #ffffff; /*#e7faf4;*/ width:500px; height: 250px; /*border: 1px solid #97ae95;*/ border-top: none; border-bottom: none; } #nNews{ } .con2OutterBox{ height: 200px; width: 250px; padding-bottom: 10px; padding-left: 30px; padding-right: 15px; float: left; } #Con2Img,#Con2Img2,#Con2Img3{ padding-top: 2px; height = 60px; width = 56px; border: 1px solid #c9d3cd; float: left; } #nTextLink a, #nTextLink2 a, #nTextLink3 a{ padding-left: 5px; float: left; color: #819b8b; font-size: 0.7em } } .con2Header, .con2Header2, .con2Header3 { padding-left:10px; font-weight:bold; font-family: 'franklin gothic medium'; font-size: 0.8em; text-align:left; } .con2InnerBox a ,.con2InnerBox2 a,.con2InnerBox3 a { } .con2Header{ height: 20px; background-image: url(con2header2.gif); repeat: repeat-x; } .con2InnerBox{ height: 180px; width: 250px; } .con2OutterBox2{ margin 10px; height: 200px; width: 250px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px; float: left; } .con2Header2{ height: 20px; background-image: url(con2header2.gif); repeat: repeat-x; } .con2InnerBox2{ height: 180px; width: 250px; } .con2OutterBox3{ height: 200px; width: 250px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px; float: left; } .con2Header3{ height: 20px; background-image: url(con2header2.gif); repeat: repeat-x; } .con2InnerBox3{ height: 180px; width: 250px; } #footer{ background: #678c66; clear: both; width: 850px; height: 100px } #footerText{ color: #d4f0d3; font-family: 'lucida sans'; font-weight: bold; text-align: center; } #footerLinks a:link { color: #d4f0d3; font-family: 'franklin gothic medium'; font-size: 0.9em; } #footerLinks a:hover { color: #fbbb76; font-family: 'franklin gothic medium'; font-size: 0.9em; } #footerLinks a:visited { color: #ffffff; font-family: 'franklin gothic medium'; font-size: 0.9em; } html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="niftyCorners.css"> <link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print"> <link rel="stylesheet" href="float2.css" type="text/css"> <script type="text/javascript" src="nifty.js"></script> <script type="text/javascript"> window.onload=function(){ if(!NiftyCheck()) return; Rounded("div#adbox1","all","#FFF","#D4DDFF","smooth"); Rounded("div#adbox2","all","#FFF","#D4DDFF","smooth"); Rounded("div#adbox3","all","#FFF","#D4DDFF","smooth"); } </script> </head> <body> <div id="header"></div> <div id="leftcol"> <br> <div id="lcTitle"> Headings</div> <div id="lcLinks"> <ul> <li > <a href="firstp.html"> First</a></li> <li > <a href="firstp.html"> Second</a></li> <li > <a href="firstp.html"> Third</a></li> <li > <a href="firstp.html"> Fourth</a></li> <li > <a href="firstp.html"> Fifth</a></li> <li > <a href="firstp.html"> Sixth</a></li> <li > <a href="firstp.html"> Seventh</a></li> <li > <a href="firstp.html"> Eighth</a></li> </ul> </div> </div> <div id="rightcol"> <div id="adbox1"><p>Welcome, This is my website. This section will hold information about various things</p> <p>I'll fill this with relevent stuff later, at the moment this is just to fomat text.</p> </div> <div id="adbox2"><p>Welcome, This is my website. This section will hold information about various things</p> <p>I'll fill this with relevent stuff later, at the moment this is just to fomat text.</p> </div> <div id="adbox3"><p>Welcome, This is my website. This section will hold information about various things</p> <p>I'll fill this with relevent stuff later, at the moment this is just to fomat text.</p> </div> </div> <div id="content"> <div id ="nDeals"><img src="nDeals.gif"/></div> <div id = "conBox1"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" /></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> <div id = "conBox2"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic"/></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> <div id = "conBox3"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" /></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> </div> <div id="content2"> <div id="nNews"><img src="nNews.gif"/></div> <div class ="con2OutterBox"> <div class="con2Header">Entertainment</div> <div class="con2InnerBox"> <div id="Con2Img"><img src="entLogo.jpg"/img></div> <div id="nTextLink"> <a href="new.html">Big Brother News</a><br/> <a href="new.html">Television News</a><br/> <a href="new.html">Celebs in Rehab News</a><br/> </div> </div> </div> <div class ="con2OutterBox2"> <div class="con2Header2">Sport</div> <div class="con2InnerBox2"> <div id="Con2Img2"><img src="sportpic.jpg"/img></div> <div id="nTextLink2"> <a href="new.html">Churchill Cup</a><br/> <a href="new.html">Euro 2008</a><br/> <a href="new.html">Ronaldo On the Move ?</a><br/> </div> </div> </div> <div class ="con2OutterBox3"> <div class="con2Header3">Computers</div> <div class="con2InnerBox3"> <div id="Con2Img3"><img src="entLogo.jpg"/img></div> <div id="nTextLink3"> <a href="new.html">Big Brother News</a><br/> <a href="new.html">Television News</a><br/> <a href="new.html">Celebs in Rehab News</a><br/> </div> </div> </div> </div> <div id="footer"> <div id="footerLinks"> <a href="page1.html">Home</a> :: <a href="page2.html">Articles</a> :: <a href="page3.html">About</a> :: <a href="page4.html">More</a> </div> <div id="footerText"><br> Copywrite 2008 - Robe Technology</div> </div> </body> </html> I get big gaps appearing everywhere, and its not consistant or anything im a noob, so if someone could help me this would be great. Also in the last thread i noted the point about needing to change from id to class, but to be honest ive done too much and its too later to do that now, im really just looking for a quick fix on this.
-
oh i see. i got the code working fine on mozilla now. But its messed up on i.e i dont understand it. I have 3 colums left center and right. left was assigned 20% of space center had 60% of space right has the other 20% the only way to get it to layout properly in firefox is to give the center 80% even though left and right were still assigned 20% each total 120% this causes it to mess up in ie. I dont get it.
-
Thanks, just one question why is it better to use class rather than id?
-
ok thanks. Html <html> <head> <link rel="stylesheet" type="text/css" href="niftyCorners.css"> <link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print"> <link rel="stylesheet" href="float2.css" type="text/css"> <script type="text/javascript" src="nifty.js"></script> <script type="text/javascript"> window.onload=function(){ if(!NiftyCheck()) return; Rounded("div#adbox1","all","#FFF","#D4DDFF","smooth"); Rounded("div#adbox2","all","#FFF","#D4DDFF","smooth"); Rounded("div#adbox3","all","#FFF","#D4DDFF","smooth"); } </script> </head> <body> <div id="header"></div> <div id="leftcol"> <br> <div id="lcTitle"> Headings</div> <div id="lcLinks"> <ul> <li > <a href="firstp.html"> First</a></li> <li > <a href="firstp.html"> Second</a></li> <li > <a href="firstp.html"> Third</a></li> <li > <a href="firstp.html"> Fourth</a></li> <li > <a href="firstp.html"> Fifth</a></li> <li > <a href="firstp.html"> Sixth</a></li> <li > <a href="firstp.html"> Seventh</a></li> <li > <a href="firstp.html"> Eighth</a></li> </ul> </div> </div> <div id="rightcol"> <div id="adbox1"><p>Welcome, This is my website. This section will hold information about various things</p> <p>I'll fill this with relevent stuff later, at the moment this is just to fomat text.</p> </div> <div id="adbox2"><p>Welcome, This is my website. This section will hold information about various things</p> <p>I'll fill this with relevent stuff later, at the moment this is just to fomat text.</p> </div> <div id="adbox3"><p>Welcome, This is my website. This section will hold information about various things</p> <p>I'll fill this with relevent stuff later, at the moment this is just to fomat text.</p> </div> </div> <div id="content"> <div id ="nDeals"><img src="nDeals.gif"/></div> <div id = "conBox1"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" width ="100" height ="100"/></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> <div id = "conBox2"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" width ="100" height ="100"/></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> <div id = "conBox3"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" width ="100" height ="100"/></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> <br> <div id = "conBox4"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" width ="100" height ="100"/></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> <div id = "conBox5"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" width ="100" height ="100"/></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> <div id = "conBox6"> <div id="conBoxTitle">Nvidia GeForce 8600GTS</div> <div id="ImG"><img src ="image1.jpeg" alt="random pic" width ="100" height ="100"/></div> <div id="conBoxCost">Price: <a href="newPage.html">£115.98</a></div> </div> </div> <div id="content2"> <div id="nNews"><img src="nNews.gif"/></div> <div class ="con2OutterBox"> <div class=con2Header>Entertainment</div> <div class=con2InnerBox> <div id="Con2Img"><img src="entLogo.jpg"/img></div> <div id="nTextLink"> <a href="new.html">Big Brother News</a><br/> <a href="new.html">Television News</a><br/> <a href="new.html">Celebs in Rehab News</a><br/> </div> </div> </div> <div class ="con2OutterBox2"> <div class=con2Header2>Sport</div> <div class=con2InnerBox2> <div id="Con2Img2"><img src="sportpic.jpg"/img></div> <div id="nTextLink2"> <a href="new.html">Churchill Cup</a><br/> <a href="new.html">Euro 2008</a><br/> <a href="new.html">Ronaldo On the Move ?</a><br/> </div> </div> </div> <div class ="con2OutterBox3"> <div class=con2Header3>Computers</div> <div class=con2InnerBox3> <div id="Con2Img3"><img src="entLogo.jpg"/img></div> <div id="nTextLink3"> <a href="new.html">Big Brother News</a><br/> <a href="new.html">Television News</a><br/> <a href="new.html">Celebs in Rehab News</a><br/> </div> </div> </div> </div> <div id="footer"> <div id="footerLinks"> <a href="page1.html">Home</a> :: <a href="page2.html">Articles</a> :: <a href="page3.html">About</a> :: <a href="page4.html">More</a> </div> <div id="footerText"><br> Copywrite 2008 - Robe Technology</div> </div> </body> </html> The css body { margin: 0px; padding: 0px; text-align: center; background: #ffffff; } #header { background-image: url(logo.jpg); width: 100%; height: 100px; } #leftcol { background: #FFF;/*e2f5e1*/ float: left; width: 20%; height: 500px; border-top: 1px solid #97ae95; /*border-bottom: 2px solid #97ae95;*/ } #leftcol a, ul { list-style-image: url(i3.gif); text-align: left; text-decoration: none; line-height: 20px; font-size: 1em; font-family: 'franklin gothic medium'; color: #14400e; } #lcTitle{ color: #729f70; font-family: 'lucida sans'; font-weight: bold; } #rightcol { background: #fff; float: right; width: 20%; height: 500px; border-top: 1px solid #97ae95; border-bottom: 0px solid #97ae95; } #content { background: #fff; float: left; width: 60%; height: 250px; border: 1px solid #97ae95; border-top: 1px solid #97ae95; border-left: none; border-right: none; } #conBoxTitle{ font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; margin 30 30px; color: #8a2733; } #conBoxCost{ font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox1{ background-image: url(bg.jpg); repeat: no-repeat; padding-top: 30px; padding-left:30px; height ="211px"; width = "250px"; float: left; } #conBox2{ background-image: url(bg.jpg); repeat: no-repeat; padding-top: 30px; padding-left:30px; height ="211px"; width = "300px"; float: left; } #conBox3{ background-image: url(bg.jpg); repeat: no-repeat; padding-top: 30px; padding-left:30px; height ="211px"; width = "250px"; float: left; } #conBox4{ background-image: url(bg.jpg); repeat: no-repeat; padding-top: 30px; padding-left:30px; height ="211px"; width = "270px"; float: left; } #conBox4 a { font-family: 'franklin gothic medium'; repeat: no-repeat; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox5{ background-image: url(bg.jpg); repeat: no-repeat; padding-top: 30px; padding-left:30px; height ="211px"; width = "270px"; float: left; } #conBox5 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox6{ background-image: url(bg.jpg); repeat: no-repeat; padding-top: 30px; padding-left:30px; height ="211px"; width = "300px"; float: left; } #conBox6 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox1 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox2 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #conBox3 a { font-family: 'franklin gothic medium'; font-weight: bold; font-size: 0.9em; color: #526988; } #ImG{ margin 30 30px; height = "100px"; width = "100px"; border: 1px solid #596575; } #adbox1{ margin: 10 10%; background:#D4DDFF; color: #ffffff; font-family:'franklin gothic medium'; } #adbox2{ margin: 10 10%; background:#D4DDFF; color: white; font-family:'franklin gothic medium'; } #adbox3{ margin: 10 10%; background:#D4DDFF; color: #ffffff; font-family:'franklin gothic medium'; } #content2{ background: #ffffff; /*#e7faf4;*/ float: left; width:60%; height: 250px; border: 1px solid #97ae95; border-top: none; border-bottom: none; } #nNews{ } .con2OutterBox{ height: 200px; width: 250px; padding-bottom: 10px; padding-left: 30px; padding-right: 15px; float: left; } #Con2Img,#Con2Img2,#Con2Img3{ padding-top: 2px; height = 60px; width = 56px; border: 1px solid #c9d3cd; float: left; } #nTextLink a, #nTextLink2 a, #nTextLink3 a{ padding-left: 5px; float: left; color: #819b8b; font-size: 0.7em } } .con2Header,.con2Header2,.con2Header3{ padding-left:10px; font-weight:bold; font-family: 'franklin gothic medium'; font-size: 0.8em; text-align:left; } .con2InnerBox a ,.con2InnerBox2 a,.con2InnerBox3 a { } .con2Header{ height: 20px; background-image: url(con2header2.gif); repeat: repeat-x; } .con2InnerBox{ height: 180px; width: 250px; } .con2OutterBox2{ height: 200px; width: 250px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px; float: left; } .con2Header2{ height: 20px; background-image: url(con2header2.gif); repeat: repeat-x; } .con2InnerBox2{ height: 180px; width: 250px; } .con2OutterBox3{ height: 200px; width: 250px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px; float: left; } .con2Header3{ height: 20px; background-image: url(con2header2.gif); repeat: repeat-x; } .con2InnerBox3{ height: 180px; width: 250px; } #footer{ background: #678c66; clear: both; width: 100%; height: 100px } #footerText{ color: #d4f0d3; font-family: 'lucida sans'; font-weight: bold; text-align: center; } #footerLinks a:link { color: #d4f0d3; font-family: 'franklin gothic medium'; font-size: 0.9em; } #footerLinks a:hover { color: #fbbb76; font-family: 'franklin gothic medium'; font-size: 0.9em; } #footerLinks a:visited { color: #ffffff; font-family: 'franklin gothic medium'; font-size: 0.9em; }
-
Hey, Firstly im just learning and its my first time posting here so sorry if i make some noob mistakes. But basically i am making a stupid site, full of pointless info to try and get used to working with css. I designed the page and checked it with internet explorer, then one time i opened with firefox and it looked messed up. So im trying to fix the problem. I cannot host the site anywhere. So i hope this is an acceptable way of showing what i mean. Here is the Site in i.e http://i31.tinypic.com/16c3swn.jpg Here is the site in mz http://i31.tinypic.com/2u5vuhx.jpg Here is the css (sorry if its not neat) http://sourcepost.sytes.net/sourcepost/sou...source_id=30349 Even if you could tell me what causes this to happen, i could find out whats wrong myself.