WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > HTML & XHTML > Controlling DIV and its single attribute

Reply
  Thread Tools Display Modes
Old 13th January 14, 12:29 PM   #1
Axia
WLC Member
 
Join Date: Feb 2010
Posts: 12
Default Controlling DIV and its single attribute

Hello Everyone!

Ive been told that I need to use DIVS (before that life was good as I was able to position everytthing where I wanted to) and Im getting a bit confused!

I have a designed a page
1) It is divided into 4 sections
a) top banner - going across the top of the page
b) menu (list of images that are also links) - on the left side of the page
c) image on the right side
d) bottom banner - going across the bottom of the page

This is what Id like to know how to do:
1) how do I create a div - I have in html [ICODE]<div class="links"> </div>[/ICODE]
a) css: [ICODE].links[/ICODE]( I will add the whole code below)
2) how do I give the div size so that it limits itself to the left side of the page and under the banner?
3) what do I use for example Ive been told relative positioning or float so that where the page is minimised the content of the page adjusts itself to the page
4) if I want to position one element of the list differently from the rest how do I do that.
5) If I want to add space between the links how do I do that?

Ive been struggling with this for a while and its stopping me from moving forward - ]any advise will be really appreciated.


Code:
HTML 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
<title>HomePage</title>
<link rel="stylesheet" type="text/css" href="CSSHShomepage-Practice5.css"/>
</head>

<body>
<div class="links">

<li><a href="URL ADDRESS"><img src="1-Image-Bl.gif" onmouseover="this.src='1-Image-Gr.gif'" onmouseout="this.src='1-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="2-Image-Bl.gif" onmouseover="this.src='2-Image-Gr.gif'" onmouseout="this.src='2-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="3-Image-Bl.gif" onmouseover="this.src='3-Image-Gr.gif'" onmouseout="this.src='3-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="4-Image-Bl.gif" onmouseover="this.src='4-Image-Gr.gif'" onmouseout="this.src='4-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="5-Image-Bl.gif" onmouseover="this.src='5-Image-Gr.gif'" onmouseout="this.src='5-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="6-Images-Bl.gif" onmouseover="this.src='6-Image-Gr.gif'" onmouseout="this.src='6-Images-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="7-Image-Bl.gif" onmouseover="this.src='7-Image-Gr.gif'" onmouseout="this.src='7-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="8-Image-Bl.gif" onmouseover="this.src='8-Image-Gr.gif'" onmouseout="this.src='8-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="9-Image-Bl.gif" onmouseover="this.src='9-Image-Gr.gif'" onmouseout="this.src='9-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="10-Image-Bl.gif" onmouseover="this.src='10-Image-Gr.gif'" onmouseout="this.src='10-Image-Bl.gif'" /></a></li>
<li><a href="URL ADDRESS"><img src="11-Image-Bl.gif" onmouseover="this.src='11-Image-Gr.gif'" onmouseout="this.src='11-Image-Bl.gif'" /></a></li>

</div>
</body>

</html>
CSS
Code:
html, body 
{
margin: 0; padding: 0; font-size: 100%;
}

img {
    max-width: 100%;
    height: auto;}
    
.links
{border:20px solid #ccc;
 left:115px;  
}
Axia is offline   Reply With Quote
Old 13th January 14, 10:01 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: Controlling DIV and its single attribute

Float to push something to one side.

Use margins to shift something

Use padding or margin to add space (Whichever works, it can vary based on where it's being applied).
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 14th January 14, 08:15 PM   #3
Axia
WLC Member
 
Join Date: Feb 2010
Posts: 12
Default Re: Controlling DIV and its single attribute

Thanks
Axia is offline   Reply With Quote
Old 16th January 14, 06:13 AM   #4
FANADEbearing
WLC Member
 
Join Date: Jan 2014
Posts: 2
Default Re: Controlling DIV and its single attribute

Controlling DIV and its single attribute
FANADEbearing is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:17 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.