Jump to content

<div>tag Function


sunicani
 Share

Recommended Posts

<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

<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

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:

  1. 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;}

  2. 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;}

  3. 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...