Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2014
    Location
    London
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    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 <div class="links"> </div>
    a) css: .links( 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;  
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    From looking at the code it's evident you do not understand modern coding let alone divs. Take a week and re-familiarize yourself with coding for the web. Study HTML5 and CSS3. Here http://www.w3schools.com/ It's written in an order that will have you flying through it. Then give this site a look see http://html5boilerplate.com/

    Number One Thing to remember Always use a doctype!


    When done, if your still having problems come back and ask questions. Good luck.
    Last edited by sunfighter; 01-13-2014 at 02:26 PM.
    Evolution - The non-random survival of random variants.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Diamondcut,
    Good for you for making the move to more modern web building techniques! That is a lot of questions!!
    I would suggest using floats instead of any sort of positioning. Have a look at this float tutorial to show some of the basics.

    You're on the right track, your <div class="links"> </div> creates a div element and .links will target any styling you apply from the CSS.

    The code you post is invalid. Something that may help you write better code is the validators. See the links about validation in my signature line 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?
    Probably the best way is to set a width and float that element.
    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
    Floats can re-arrange themselves. Many times though, like the example I've given below, floats are in a set width container so that doesn't happen.
    4) if I want to position one element of the list differently from the rest how do I do that.
    You can give an li it's own class or ID to style it differently from the CSS.
    5) If I want to add space between the links how do I do that?
    Add top and/or bottom margin to make space. Look at the bit of CSS I've highlighted in red below.

    Look at this snippet to give you some ideas -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>HomePage</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    }
    header {
    	height: 100px;
    	background: #0f0;
    }
    .links {
    	width: 200px;
    	float: left;
    	background: #9f0;
    }
    .links ul li {margin: 10px 0;}
    #content {
    	height: 400px;
    	overflow: auto;
    	background: #f60;
    }
    footer {
    	height: 100px;
    	clear: both;
    	background: #c30;
    }
    
    </style>
    </head>
    <body>
        <div id="container">
    		<header>Top Banner</header>	
    	<div class="links">
    		<ul>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    			<li><a href="*"></a></li>
    		</ul>
    	<!--end .links--></div>
    	<div id="content">
    	<!--end content--></div>
    		<footer>Bottom Banner</footer>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Diamondcut (01-13-2014)

  • #4
    New Coder
    Join Date
    Jan 2014
    Location
    London
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Excavater, many thanks for taking the time to answer the questions....I do feel like a bit of an idiot but what you've said and the example will be something I can work from and will put reading material into perspective.

    But can you please explain
    <!--end .links--></div> - is this the proper way to close a links div rather than just </div>


    <div id="content"> (I take it the fact that there is nothing between the content and end content is to show it as an example...
    <!--end content--></div> -

    <footer>Bottom Banner</footer> - why is this not in a DIV?
    <!--end container--></div> - again best way to close?

    <div class="links">
    <ul>
    <li>
    I didnt realise this could translate as .links ul li
    even though the class has not been specifically identified as such ie: <div class="links ul li"

    The example you've give is very useful...thanks again!

    Sorry you know Im a woman of many questions last one!

    .links ul li - why use .
    #content- why use # here any reason?

    Thankyou! You've saved me over a week of pain!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    [QUOTE=Diamondcut;1383701]
    But can you please explain
    <!--end .links--></div> - is this the proper way to close a links div rather than just </div>
    Later on in development, once you have a lot of content, it's a lot easier to have the closing tag marked with a comment so you know what it's closing. It's just become a habit of mine.

    <div id="content"> (I take it the fact that there is nothing between the content and end content is to show it as an example...
    <!--end content--></div> -
    That's an empty div element just waiting for content. For the time being I've given it a height, see
    Code:
    #content {
    	height: 400px;
    	overflow: auto;
    	background: #f60;
    }
    Later on, once you get some content in there, you would probably want to remove that height. That example code I gave you is based on this simple 2 column layout.
    <footer>Bottom Banner</footer> - why is this not in a DIV?
    HTML5 has new elements available, footer is one of them. Read about HTML5 a bit here.

    <div class="links">
    <ul>
    <li>
    I didnt realise this could translate as .links ul li
    even though the class has not been specifically identified as such ie: <div class="links ul li"
    That's just a very specific way of directing the CSS to only those li elements. Have a read about specificity here.

    Sorry you know Im a woman of many questions last one!

    .links ul li - why use .
    #content- why use # here any reason?
    In your CSS, # denotes an ID while . refers to a class. See that link I posted earlier about Class or ID

    Thankyou! You've saved me over a week of pain!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Diamondcut (01-14-2014)

  • #6
    New Coder
    Join Date
    Jan 2014
    Location
    London
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks your for sharing the knowledge!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •