Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Odstęp między 2 divami
Matado
post
Post #1





Grupa: Zarejestrowani
Postów: 67
Pomógł: 0
Dołączył: 9.12.2008

Ostrzeżenie: (0%)
-----

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;
}


Ten post edytował Matado 5.03.2009, 10:43:33
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 1)
krzysiekk
post
Post #2





Grupa: Zarejestrowani
Postów: 155
Pomógł: 17
Dołączył: 13.03.2006
Skąd: Jaworze

Ostrzeżenie: (0%)
-----

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

[HTML] pobierz, plaintext 
  1. html, body {
  2.     background-color: #cccccc;
  3.     color: #000;
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7.  
  8. div#wrapper {
  9.     width: 1000px;
  10.   margin: 0 auto;
  11.   border:1px solid #ff0000;
  12. }
  13.  
  14. div#top {
  15.     background-image: url(images/top.jpg);
  16.     height: 23px;
  17. 	border:1px solid #ff0000;
  18. }
  19.  
  20. div#main {
  21.     overflow: hidden;
  22.     background-image: url(images/main.jpg);
  23.     height: 755px;
  24. }
  25.  
  26. div#footer {
  27.     clear: both;
  28.     width: 100%;
  29.     height: 22px;
  30.     background-image: url(images/footer.jpg);
  31. }
  32.  
  33. div#menu {
  34.     width: 190px;
  35.  
  36. 	margin:50px 0 0 100px;
  37.     float: left;
  38.     border: solid 1px green;
  39.     overflow: hidden;
  40. }
  41.  
  42. div#news {
  43.     width: 500px;
  44. 	margin:50px 0 0 50px;
  45.     float: left;
  46.     border: solid 1px green;
  47.     overflow: hidden;
  48. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 00:28
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn