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 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    making use of space

    hey, I can't seem to make full use of the space im assigning
    Code:
    @charset "utf-8";
    /* CSS Document */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    small, strike, strong, b, u, i, center, div,
    dl, dt, dd, ol, ul, li, form, table, thead, tr, th, td, 
    footer, header, menu, nav {
    	margin: 0 auto;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    body{
    	font-size:14px;
    	font-family:Arial, Helvetica, sans-serif;
    	background-color:black;
    	max-width:1000px;
    	min-width:1000px;
    
    }
    
    #logo{
    	float:left;
    	width:700px;
    	
    }
    	
    #toprightbox{
    	float:right;
    	width:300px;
    	padding-top:10px;	
    	
    }
    I just can't see what i'm forgetting to do/missed out
    If I give the body tag a width of 1000px then the logo and toprightbox should fit? im having to drop 20px off an image for it to fit.
    Also I am floating the toprightbox to the right and the images are staying to the left inside, which is fair enough because I haven't told them to go anywhere, but which would be the best way to get the images in the container to the right, using float again inside the box or just padding from the left?
    Any ideas? cheers.

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    just make sure topright box is set to the exact width of your picture

    Code:
    body{
    	font-size:14px;
    	font-family:Arial, Helvetica, sans-serif;
    	background-color:black;
    	width:1000px;
    
    }
    
    #logo{
    	float:left;
    	width:700px; <---this width doesnt matter as much as long as it is not larger than 1000px-the exact width of your image
    	
    }
    	
    #toprightbox{
    	float:right;
    	width:....   <--exact width of picture
    	margin-top:20px;
    	
    }

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts
    it probably wasnt the best way to go around doing it but basically I have two small images that I wanted to the right of the logo, I thought the best way would be creating a div and putting the two images in it and floating the box with the images in to the right of the logo?

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    do you have an image of wha you want?

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts
    no it's basically just a band logo with a small icon for facebook and another for myspace next to it

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>testing 1 2 3</title>
    
    
    <STYLE type="text/css">
    *{margin:0; padding:0;}
    #nav {width:1000px; margin:0 auto; height:50px; background-color:#ccc;}
    #logo {width:400px; height:50px; float:left;  background-color:#333;}
    .fb {width:40px; height:40px; float:right; margin:5px 10px 5px 10px;  background-color:#999;}
    .twitter {width:40px; height:40px; float:right; margin:5px 10px 5px 10px;  background-color:#999;}
    </style>
    </head>
    <body>
    <div id="nav">
    	<div id="logo">LOGO</div>
    	
    		<div class="fb">FB</div>
    		<div class="twitter">TWIT</div>
    	
    </div>
    
    </body>
    
    </html>
    Last edited by SeattleMicah; 06-12-2012 at 01:03 AM.

  • Users who have thanked SeattleMicah for this post:

    joe2730 (06-12-2012)

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ah I get it put all 3 inside of one thank you


  •  

    Posting Permissions

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