January 9, 201115 yr OK i have asked how to centralise my page in HTML i have posted my current code, and someone kindly has re coded my code to do what i wanted it to do. Now the problem is that i dont understand what he has done, i understand most parts of it, but there is a few that i dont know, and i was wondering if anyone would be kind enough to explain what part of the CSS refers to what part of the webpage it is, and how would i add content to that. using the code he has provided. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Portsmouth Destroyers | Home</title> <style type="text/css"> body { background:#000000; font-family:Arial,Helvetica,Sans-serif; font-size:12px; font-weight:400; color:#999999; line-height:18px; } #container { margin: 0 auto; width: 1021px; background:transparent;/* #fff*/ } #header { background: #000000; padding: 0px; margin:0; } #header img { margin:0 px; padding: 0px; border:none; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #000000; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 5px; color: #fff; text-decoration: none; /*border-right: 1px solid #fff;*/ } #navigation li a:hover { background:none; } #content-container { float: left; width: 100%; background:#000000;/*#cdcebe*/ } #content { clear: left; float: left; width: 60%; padding: 20px 0; margin: 0 0 0 4%; display: inline; /*min-height:1000px;*/ padding-bottom:500px; } #content h2 { margin: 0; } .aside { float: right; width: 26%; padding: 20px 0; margin: 0 3% 0 0; display: inline; } .aside h3 { margin: 0; } #footer { clear: left; background:#000000;/* #ccc*/ text-align: both; padding: 20px; height: 1%; } </style> </head> <body> <div id="container"> <div id="header"> <h1> <img src="http://i275.photobucket.com/albums/jj288/worrioz/WEBSITEBANNERDRAFT.png" alt="Photobucket"/> </h1> </div> <div id="navigation"> <ul> <li><a href="#"><img src="http://i275.photobucket.com/albums/jj288/worrioz/CLUBHISTORYBUTTON.png" alt="Club History"/></a></li> <li><a href="#"><img src="http://i275.photobucket.com/albums/jj288/worrioz/ROSTERBUTTON.png" alt="Roster"/></a></li> <li><a href="#"><img src="http://i275.photobucket.com/albums/jj288/worrioz/CoachingStaff.png" alt="Coaching Staff"/></a></li> <li><a href="#"><img src="http://i275.photobucket.com/albums/jj288/worrioz/SHEDULEBUTTON.png" alt="Schedule"/></a></li> <li><a href="#"><img src="http://i275.photobucket.com/albums/jj288/worrioz/SHEDULEBUTTON.png" alt="Schedule"/></a></li> <li><a href="#"><img src="http://i275.photobucket.com/albums/jj288/worrioz/SHEDULEBUTTON.png" alt="Schedule"/></a></li> </ul> </div> <div id="content-container"> <div id="content"> <h2> Page heading </h2> <p> Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </div> <div class="aside"> <h3> <img src="http://i275.photobucket.com/albums/jj288/worrioz/NEXTGAMEBOX-1.png" alt="Photobucket"/> </h3> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. </p> </div> <div class="aside"> <h3> Sponsor <img src="http://i275.photobucket.com/albums/jj288/worrioz/pararail-1.png" width="260px" height="59px"alt="PARARAIL"/> </h3> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. </p> </div> <div id="footer"> Copyright © Site name, 20XX </div> </div> </div> </body> </html> Now i understand some of the CSS for example. The body is the whole page, the container is a box within the window in wich all my content is inside. etc... let me make it easier #navigation { float: left; width: 100%; background: #000000; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 5px; color: #fff; text-decoration: none; /*border-right: 1px solid #fff;*/ } #navigation li a:hover { background:none; } Ok i know all this is to do with the navagation buttons of mine, why does there need to be 5 seperate parts of code for the same thing. Do most of these even need to be there if im using pictures as navagation buttons? And what does the Display: Block attribute do? also the #navigation ul li { list-style-type: none; display: inline; } What does this do to my navagation... And i cant find the id= "navagation ul li" in any of the div tags in the code? Also.. #content-container { float: left; width: 100%; background:#000000;/*#cdcebe*/ } #content { clear: left; float: left; width: 60%; padding: 20px 0; margin: 0 0 0 4%; display: inline; /*min-height:1000px;*/ padding-bottom:500px; } Now i understand what most of the declarations are doing, apart from the display: inline and margin: 0 0 0 4% but where are the selectors of teh above code.?? Are they the block of text on the page, and if so, why is there in the code <div class="content-container"> <div class"content"> I just dont it. And finally .aside { float: right; width: 26%; padding: 20px 0; margin: 0 3% 0 0; display: inline; } .aside h3 { margin: 0; } Ok i know that this is the right side of the page, but what i dont get here is the width:26% and the margin declaration. and the display inline.. Considering this will be my 'template' so to speak for everypage of my website, how do i change the code to add content where the big block of text is. For instance, on the rosters page, i have pictures of the players that are currently in my code, are in 3 collums of 14 rows. How would i adapt these to this code. As i have each row in a instyle div. If you need examples i can show you the code. I dont want anyone to do the work for me, as i want to do it on my own, what im asking for you is to help me understand so i can do it myself If someone could spend 5 mins helping me understand this i would be truly greatfull. Thank You.
January 9, 201115 yr Phew - this is a lot. I'll help with some of it but, to be entirely honest - not gonna read through it all. Sorry! First thing first, '#navigation ul li' is not an id name. Your navigation is inside a list item. <ul> is the tag to create an unordered list (bulleted list). <li> is the tag to create a line item inside that list. For example: <ul> <li>Item One</li> <li>Item Two</li> </ul> gives this outcome: Item One Item Two In your css, #navigation refers to the div with the id 'navigation.' '#navigation ul li' refers to all list items (li) inside an unordered list (ul) inside the div with the id navigation (#navigation). Next, list-style-type: none; removes all styling from the list (no bullets mainly). display: inline; shows the list items horizontally next to each other, not under one another. display: block means that the element is displayed as a block. It has some white space above and below it and, practically, just makes styling links a little easier. That's all for now. It seems like you need to read up on some basic html / css. If you google any of the things you're confused about, you'll get answers. Hope this helps a little, ymd
January 9, 201115 yr Author Phew - this is a lot. I'll help with some of it but, to be entirely honest - not gonna read through it all. Sorry! First thing first, '#navigation ul li' is not an id name. Your navigation is inside a list item. <ul> is the tag to create an unordered list (bulleted list). <li> is the tag to create a line item inside that list. For example: <ul> <li>Item One</li> <li>Item Two</li> </ul> gives this outcome: Item One Item Two In your css, #navigation refers to the div with the id 'navigation.' '#navigation ul li' refers to all list items (li) inside an unordered list (ul) inside the div with the id navigation (#navigation). Next, list-style-type: none; removes all styling from the list (no bullets mainly). display: inline; shows the list items horizontally next to each other, not under one another. display: block means that the element is displayed as a block. It has some white space above and below it and, practically, just makes styling links a little easier. That's all for now. It seems like you need to read up on some basic html / css. If you google any of the things you're confused about, you'll get answers. Hope this helps a little, ymd Thanks for what you have said. I know basic html and css otherwise if i didnt i wouldnt be able to produce a website, this however is not basic html. I know what most of the CSS is doing such as padding, font colour, font size etc, its the more complex styling to me that im getting confused with such as how it relates within my webpage. having spoken to the guy who provided me with the code i now understand most of what i was asking here. The list styles are ones wich i did not know so thanks for that. Although i know how to basically do an ul i didnt know the styling elements for them.
January 9, 201115 yr Author If you really want to understand css the only way is to learn it. W3chools So you said in my previous thread. If you cant tell me what i need to know (what ive asked for in this particular thread) then please stop posting the same thing. I am learning CSS in my course aswell as learning stuff whilst progressing in this project but im on a tight deadline to complete. And myself as a person always aims higher than i can do to give myself a challenge. Im not asking anyone to code it, im asking to help me understand this particular code.
January 9, 201115 yr And the links are where you can easily find the answers, for someone asking for help you are very rude and ungrateful. The link on the other thread was different and was made a sticky thread because of its usefulness.
January 9, 201115 yr What are you stuck with ? I'll try and explain you've upset my friend Wayne who posted a link of a great starting point Edited January 9, 201115 yr by mteam
January 9, 201115 yr Author And the links are where you can easily find the answers, for someone asking for help you are very rude and ungrateful. The link on the other thread was different and was made a sticky thread because of its usefulness. FYI, i have been to look at the link you provided, and i can assure you that it doesnt give me what i want to know. As for one it doesnt take into consideration my code, wich are where my questions lie, yes i agree it will tell me what i need to know if it was the css styling that i required to know, but as that is not the case bar a few instances it doesnt give me the answers. Can i please ask where you came to the conclusion that i was rude and ungrateful for help. As i am sure that in response to everyone that has provided me with help, to wich i asked for, was responded with a thank you no matter how big or little the help was? Actually Mteam thanks for the offer, but i think ive just about figured out what i needed to know. Thanks anyway. Edited January 9, 201115 yr by Beer Huntor
Create an account or sign in to comment