cssLearner
Members
-
Joined
-
Last visited
-
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