Forum PHP.pl > [HTML][CSS] Odstęp między 2 divami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Odstęp między 2 divami

Matado

5.03.2009, 10:39:20

Mam problem dot. 2 divów. W divie "main" są dwa divy: menu i news. Chcę aby były oddalone o siebie o np. 100px i np. 200px od góry i 150 z lewej strony. Nie mogę ustawić tego za pomocą margin: . Macie jakieś pomysły, żeby ustawić tak te divy?

Chodzi mi o coś takiego: http://i40.tinypic.com/21j90xz.jpg

XHTML

Kod

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
   <title>WOW Info</title>
   <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="wrapper">
<div id="top">
Logo
</div>
<div id="main">
    <div id="menu">
    Menu
    </div>
    <div id="news">
    News
    </div>
</div>
<div id="footer">
Footer
</div>

</div>
</body>
</html>

CSS:

Kod

html, body {
    background-color: #000;
    color: #000;
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 1000px;
    margin: auto;
}

#top {
    background-image: url(images/top.jpg);
    height: 23px;
}

#main {
    overflow: hidden;
    background-image: url(images/main.jpg);
    height: 755px;
}

#footer {
    clear: both;
    width: 100%;
    height: 22px;
    background-image: url(images/footer.jpg);
}

#menu {
    width: 190px;
    float: left;
    border: solid 1px green;
    overflow: hidden;
}

#news {
    width: 500px;
    float: left;
    border: solid 1px green;
    overflow: hidden;
}

krzysiekk

5.03.2009, 11:33:17

witam czy o to ci chodzi podmień swojego css-a

[HTML] pobierz, plaintext 
html, body {
    background-color: #cccccc;
    color: #000;
    margin: 0;
    padding: 0;
}
 
div#wrapper {
    width: 1000px;
  margin: 0 auto;
  border:1px solid #ff0000;
}
 
div#top {
    background-image: url(images/top.jpg);
    height: 23px;
	border:1px solid #ff0000;
}
 
div#main {
    overflow: hidden;
    background-image: url(images/main.jpg);
    height: 755px;
}
 
div#footer {
    clear: both;
    width: 100%;
    height: 22px;
    background-image: url(images/footer.jpg);
}
 
div#menu {
    width: 190px;
 
	margin:50px 0 0 100px;
    float: left;
    border: solid 1px green;
    overflow: hidden;
}
 
div#news {
    width: 500px;
	margin:50px 0 0 50px;
    float: left;
    border: solid 1px green;
    overflow: hidden;
}
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.