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 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2010
    Location
    Slovenia
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to put 2 divs together?

    Well, what i'm trying to do is this:
    I have a website with header div, body div and footer div.
    But the problem is, that between head div and body div there is 20px of free space, same goes for footer div.
    I i use normal margin-top/bottom it works, but when another page is loaded with same style, the images cross over eachother making the shadow look like crap.

    Here is my CSS:
    Code:
    body {
    background: #8dc73f;
    }
    
    div.header {
        background-image: url("slike/logo2.png");
        width: 367px;
        height: 71px;
        z-index: -1;
        background-repeat: no-repeat;
        margin: 5px auto 0px auto;
    }
    
    div.sheer {
        z-index: 0;
        width: 473px;
        height: auto;
        background-image: url("slike/sheet.png");
        background-repeat: repeat-y;
         margin: 5px auto 0px auto;
            position: relative;
    }
    
    div.top {
        z-index: 0;
        width: 473px;
        height: 7px;
        background-image: url("slike/sheet-top.png");
        background-repeat: no-repeat;
        vertical-align: middle;
        margin: 5px auto 0px auto;
        position: relative;
        margin-top: auto;
    }
    
    div.bot {
        z-index: 0;
        width: 473px;
        height: 54px;
        background-image: url("slike/sheet-bot.png");
        background-repeat: no-repeat;
        position: relative;
        margin: 0px auto 0px auto;
    }
    
    div.text {
        z-index: 1;
        text-align: left;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    h1{
        font-family: Arial,Helvetica,sans-serif;
    }
    I'm new to CSS so don't be harsh
    Last edited by ItsGreg; 06-09-2010 at 09:30 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    I don't understand your problem do you have an example page, screenshots or HTML for the CSS?

    Also there's no need to specify z-index on everything unless you are positioning elements on-top of one another and you want to set the stacking order of them

  • #3
    New Coder
    Join Date
    Jun 2010
    Location
    Slovenia
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scriptet View Post
    I don't understand your problem do you have an example page, screenshots or HTML for the CSS?

    Also there's no need to specify z-index on everything unless you are positioning elements on-top of one another and you want to set the stacking order of them
    yeah I just sorta copied some code from an existing CSS my friend made. anyhow, this is how the page looks:
    http://i579.photobucket.com/albums/s...ed-5copy-1.png

    it's a login form. Don't mind the language
    Last edited by ItsGreg; 06-09-2010 at 09:42 PM.

  • #4
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    @ItsGreg
    In your image you have blurred the image at the top to hide the site but you have left the address bar showing the exact URL of your site.

    Andy

  • #5
    New Coder
    Join Date
    Jun 2010
    Location
    Slovenia
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I know, don't hack me

  • #6
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Why would I do that?

    I was just telling you that you obviously hid the image for a reason but you left the actual URL open to the public.

    (Nice one on the edit)

    Andy

  • #7
    New Coder
    Join Date
    Jun 2010
    Location
    Slovenia
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahayzen View Post
    Why would I do that?

    I was just telling you that you obviously hid the image for a reason but you left the actual URL open to the public.

    Andy
    I fixed it though

  • #8
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Could we seen the HTML?

    This may help.

    Good one on the fix

    Andy

  • #9
    New Coder
    Join Date
    Jun 2010
    Location
    Slovenia
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="sl"> 
     
    <head profile="http://gmpg.org/xfn/11"> 
     
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
     
    <title>Login</title> 
     
    <script type="text/javascript" src="localhost/wp-content/themes/fbg/script.js"></script> 
     
    <link rel="stylesheet" href="localhost/wp-content/themes/fbg/forme.css" type="text/css" media="screen" /> 
     
    </head> 
    <body> 
    <a href="localhost" title="Nazaj na Login"><div class="header"></div></a> 
    <div class="top"></div> 
    <div class="slika"> 
    <div class="text">    <h1>Prijava</h1> 
    <form name="loginform" id="loginform" action="localhost/wp-login.php" method="post"> 
    	<p> 
    		<label><strong>Uporabnisko ime</strong><br/> 
    		<input type="text" name="log" id="user_login" value="" tabindex="500" /></label><br/> 
    		<label><strong>Geslo</strong><br/> 
    		<input type="password" name="pwd" id="user_pass" value="" tabindex="510" /></label><br/> 
    	  <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="520" style="width: 15px;"  /> Zapomni si me</label> 
    	</p> 
    	<p class="submit"> 
    		<input type="submit" name="wp-submit" id="wp-submit" value="Prijava" tabindex="530" /> 
    		<input type="hidden" name="redirect_to" value="localhost" /> 
    		<input type="hidden" name="testcookie" value="1" /> 
    	</p> 
    </form> 
    <p style="font-size: 10px"> 
     
        <a href="localhost/registracija">Registracija</a>&nbsp;|
     
    <a href="localhost/geslo">Izgubljeno geslo?</a> 
    </p> 
    </div> 
    </div> 
        <div class="bot"></div> 
        <center> 
        <!-- ADpartner --> 
    <script type="text/javascript"> 
    <!--
      adp_zone_id = 'NTc3OSwyLDIsMCsxLDI0MjA=';
      adp_zone_width = 468;
      adp_zone_height = 60;
      adp_color_border = '8dc73f';
      adp_color_bg = '8dc73f';
      adp_color_title = '344b4a';
      adp_color_link = '154aab';
      adp_color_text = '000000';
    // -->
    </script> 
    <script type="text/javascript" src="http://kos.interseek.si/_slave_01/js/serve.js"></script> 
    <!-- /ADpartner --> 
        </center> 
    </body> 
    </html>

  • #10
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Ok try this CSS and see what happens

    Code:
    body {
    background: #8dc73f;
    }
    
    div.header {
        background-image: url("slike/logo2.png");
        width: 367px;
        height: 71px;
        z-index: -1;
        background-repeat: no-repeat;
        margin: 0px auto 0px auto;
    }
    
    div.sheer {
        z-index: 0;
        width: 473px;
        height: auto;
        background-image: url("slike/sheet.png");
        background-repeat: repeat-y;
         margin: 0px auto 0px auto;
            position: relative;
    }
    
    div.top {
        z-index: 0;
        width: 473px;
        height: 7px;
        background-image: url("slike/sheet-top.png");
        background-repeat: no-repeat;
        vertical-align: middle;
        margin: 0px auto 0px auto;
        position: relative;
        margin-top: auto;
    }
    
    div.bot {
        z-index: 0;
        width: 473px;
        height: 54px;
        background-image: url("slike/sheet-bot.png");
        background-repeat: no-repeat;
        position: relative;
        margin: 0px auto 0px auto;
    }
    
    div.text {
        z-index: 1;
        text-align: left;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    h1{
        font-family: Arial,Helvetica,sans-serif;
    }
    Remember to backup your old CSS just in case it makes it worse!!!

    Andy

  • Users who have thanked ahayzen for this post:

    ItsGreg (06-09-2010)

  • #11
    New Coder
    Join Date
    Jun 2010
    Location
    Slovenia
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahayzen View Post
    Ok try this CSS and see what happens

    Code:
    body {
    background: #8dc73f;
    }
    
    div.header {
        background-image: url("slike/logo2.png");
        width: 367px;
        height: 71px;
        z-index: -1;
        background-repeat: no-repeat;
        margin: 0px auto 0px auto;
    }
    
    div.sheer {
        z-index: 0;
        width: 473px;
        height: auto;
        background-image: url("slike/sheet.png");
        background-repeat: repeat-y;
         margin: 0px auto 0px auto;
            position: relative;
    }
    
    div.top {
        z-index: 0;
        width: 473px;
        height: 7px;
        background-image: url("slike/sheet-top.png");
        background-repeat: no-repeat;
        vertical-align: middle;
        margin: 0px auto 0px auto;
        position: relative;
        margin-top: auto;
    }
    
    div.bot {
        z-index: 0;
        width: 473px;
        height: 54px;
        background-image: url("slike/sheet-bot.png");
        background-repeat: no-repeat;
        position: relative;
        margin: 0px auto 0px auto;
    }
    
    div.text {
        z-index: 1;
        text-align: left;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    h1{
        font-family: Arial,Helvetica,sans-serif;
    }
    Remember to backup your old CSS just in case it makes it worse!!!

    Andy
    Nothing really changes...

  • #12
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Your problem is to do with browser defaults. All browsers set different CSS defaults on some HTML elements, for example default paddings, margins are applied to heading tags (e.g. H1).

    Now you can reset all defaults by using the star-selector, because the star-selector selects all elements. So if you wanted to reset the margin and padding for all elements you add this to the top of your CSS:

    Code:
    *{ margin:0; padding:0; }
    In your case the gaps are caused from the default margins on <h1> and <p> tags which you have not set, or reset. So for if you didn't want to use the star reset to reset all margins and paddings you could also do:

    Code:
    h1, p { margin:0; padding: 0;}
    So basically you either need to set or reset the margins and paddings on some elements otherwise the browser defaults will be used.

    On a side note this is invalid HTML

    Code:
    <a href="localhost" title="Nazaj na Login"><div class="header"></div></a>
    You can't have a DIV inside an anchor (<a>) as a DIV is a block element and an anchor is an inline element. Instead the HTML should look like this:

    Code:
    <div class="header"><a href="localhost" title="Nazaj na Login"></a></div>
    Then so the anchor fills the whole header box you add this to your CSS:

    Code:
    .header a{ display:block; }
    Also <center></center> tags are deprecated you shouldn't use them and instead center things using CSS by adding text-align:center; or automatic left and right margins (margin:0 auto;)

    Lastly you can remove all instances of position:relative; and any z-index statements you have inside your CSS because there is no need for them here.

  • Users who have thanked Scriptet for this post:

    ItsGreg (06-10-2010)


  •  

    Posting Permissions

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