...

View Full Version : How to put 2 divs together?



ItsGreg
06-09-2010, 08:25 PM
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:


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 :p

Scriptet
06-09-2010, 08:32 PM
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

ItsGreg
06-09-2010, 08:39 PM
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/ss234/ItsGreg/Untitled-5copy-1.png

it's a login form. Don't mind the language

ahayzen
06-09-2010, 08:43 PM
@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

ItsGreg
06-09-2010, 08:44 PM
I know, don't hack me :(

ahayzen
06-09-2010, 08:47 PM
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

ItsGreg
06-09-2010, 08:48 PM
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 :)

ahayzen
06-09-2010, 08:49 PM
Could we seen the HTML?

This may help.

Good one on the fix

Andy

ItsGreg
06-09-2010, 08:56 PM
<!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>

ahayzen
06-09-2010, 09:00 PM
Ok try this CSS and see what happens



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

ItsGreg
06-09-2010, 09:03 PM
Ok try this CSS and see what happens



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...

Scriptet
06-09-2010, 11:00 PM
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:


*{ 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:


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


<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:


<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:


.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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum