sunicani Posted July 14, 2009 Share Posted July 14, 2009 http://threestore.three.co.uk/how to fulfill the layout several sections like LOGO, and Navigation Section of the link posted above?mostly I found a js <div> tag be applied! anybody experts who can give me the basic layout for the function I mentioned herein before?thanks a lot. Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 <div> is not Javascript, it's HTML.To make things change color when you hover over them you use the :hover pseudo-class in CSS.I don't really understand what you mean by "fullfill the layout." Link to comment Share on other sites More sharing options...
sunicani Posted July 14, 2009 Author Share Posted July 14, 2009 <div> is not Javascript, it's HTML.To make things change color when you hover over them you use the :hover pseudo-class in CSS.I don't really understand what you mean by "fullfill the layout."I meant how to fulfill Page Layout (like three lines, two columns) via Div &CSS function? Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 OK, you want to learn how to make a page layout with HTML and CSS.There are some simple rules that will help you when designing a site: A <div> element, when not given a width, will stretch to take all the available horizontal space, this means that simply typing <div>X</div> will put an invisible horizontal bar across your page (unless the <div> is inside another element, it will stretch to take up all the width of the element it is contained it). The <div> element takes the height of all the content that is inside it unless a height is specified with CSS.To see the <div> you just created, you can give it a background color:HTML:<div class="red">X</div> CSS: .red { background-color: red;} When applying the CSS float property, all the content that follows it will be placed next to it, until its content gets further down than the bottom limit of the column, it will then wrap to go below it.This is used together with the CSS width property to make columns. Here is a simple example:<div class="left">X</div><p>This paragraph will be placed next to the column </p> .left { background-color: blue; width: 120px; float: left;} To stop text from being forced next to a floated element (an element that has the float property) you can use the clear property. The same example as before, but the second paragraph will go below the column:<div class="left">X</div><p>This paragraph will be placed next to the column </p><p class="clear">This paragraph goes below the column .left { background-color: blue; width: 120px; height: 100px; float: left;}.clear { clear: both;} There are a lot more details, but I first recommend you get used to the most basic features of CSS-based layouts. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.