SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Lodon
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Margin-bottom problem[please help]

    Hello every one, I just joined to this forum
    And i have one question:
    I just started coding a website but I found problem in header;After I insert 3 buttons and logo to the header I couldn't insert any other element next to the logo(opposite of it)
    [I tried clear:both and right and left and I thought I should just use margin bottom but it doesn't work]
    Pleas help
    And here is m html code:

    HTML Code:
    <!doctype html>
    <html>
    <head>
    <link href="_CSS/style.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <title>به گیلد رف اف الاینس خوش امدید</title>
    <meta name="description" content="One of the best guilds in persian server "jahan games" Is wrath of the alliance"/>
    <meta name="keywords" content="Best persian guild, Jahan games, wrath of the alliance, world of warcraft, WOW tips, WOW level up tips"/>
    
    </head>
    <body>
    <div id="main">
    <header> 
    	
    			<a href="#home" ><img id="home" src="_Images/Button 1.jpg" width="60" height="37" alt="Home"> </a>
    					<a href="#about"> <img id="about"src="_Images/Button 2.jpg" width="96" height="36" alt="about"> </a>
    	   	<a href="#rules"> <img id="rules"src="_Images/Button 3.jpg" width="130" height="36" alt="Rules"></a>
    		<img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo"></header>
    
    		<input type="text" name="search" id="search">
    		<label for="search"></label>
    </div>
    </body>
    </html>
    And here is CSS code
    /* CSS Document */
    Code:
    body{
    	background-color:#EFEFEF;
    	height:1100px
    	
    
    }
    header{
    	background-image: url(../_Images/Header_bg.png);
    	height: 240px;
    	margin: auto;
    	width: 850px;
    }
    #search {
    	float: right;
    	margin-bottom: 150px;
    }
    #logo{
    	margin-top: 65px;
    	margin-left: 50px;
    	clear: right;
    	
    	
    	
    }
    
    #main{
    	width: 850px;
    	margin: auto;
    	height: 1100px;
    }
    #rules {
    	float: right;
    	margin-right: 10px;
    }
    #about {
    	margin-right: 10px;
    	float: right;
    }
    #home {
    	float: right;
    	margin-right: 5px;
    	clear: right;
    }

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Lodon
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed
    HTML Code:
    <img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo"></header>
    
    		<input type="text" name="search" id="search">
    		<label for="search"></label>
    to
    HTML Code:
    <img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo">
    
    		<input type="text" name="search" id="search">
    		<label for="search"></label>
    </header>
    But didn't worked

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi l-hcdf,

    It's not totally clear what the issue is, but the bottom margin here will prevent anything from sitting right next to the logo:

    Code:
    #search {
    float: right;
    margin-bottom: 150px;
    }
    Could you post an image of how you want the header organized?


Bookmarks

Posting Permissions

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