Forum PHP.pl > [CSS][HTML] Jak ułożyć divy tak jak chcę? :<

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] Jak ułożyć divy tak jak chcę? :<

Flapper

27.04.2008, 18:56:28

No właśnie próbowałem różnych metod ustawiania ale nijak mi nie wychodzi jak chcę...
Mam taki arkusz:

Kod

html, body {
    background-color: #000000;
    color: #18ff00;
    margin: 0;
    padding: 0;
    font-family: System, Terminal;
}

#top {
    width: 1007px;
}

#top1 {
    position: relative;
    float: left;
    background: url(images/1.gif);
    width: 194px;
    height: 216px;
    overflow: hidden;
}
#top2 {
    position: relative;
    background: url(images/2.gif);
    width: 588px;
    height: 216px;
    overflow: hidden;
}
#top3 {
    position: relative;
    background: url(images/3.gif);
    width: 225px;
    height: 716px;
    overflow: hidden;
}

#mid1 {
    position: relative;
    float: left;
    background: url(images/4.gif);
    width: 194px;
    height: 500px;
    overflow: hidden;
}

#mid2 {
    position: relative;
    background: url(images/5.gif);
    width: 588px;
    height: 500px;
    overflow: hidden;
}

#stopka {
    position: relative;
    background: url(images/6.gif);
    width: 1007px;
    height: 39px;
    overflow: hidden;
}

I chciałbym żeby wyglądało to mniej więcej tak:
top1 top2 top3
mid1 mid2 top3
stopka stopka

przy czym te podwójne top3 i stopki mają być pojedynczymi divami.
I nie mam pojęcia jak te divy poukładać w HTML'u i co im w stylu wpisać żeby się tak ułożyło.
Męczę to od wczoraj ale samemu mi się to chyba nie uda.

Liczę na waszą pomoc, z góry dzięki.

krzywy36

28.04.2008, 08:23:42

Może nie najlepszy sposób, ale na szybko pisane ;] no i chciałeś każdy div osobno:

[HTML] pobierz, plaintext 
<html>
<head>
<title>tytuł</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="top1">top1</div>
<div id="top2">top2</div>
<div id="top3">top3</div>
<div class="clear"></div>
<div id="mid1">mid1</div>
<div id="mid2">mid2</div>
<div id="top3-2">top3-2</div>
<div class="clear"></div>
<div id="stopka1">stopka1</div>
<div id="stopka2">stopka2</div>
</body>
</html>
[HTML] pobierz, plaintext

style.css

[HTML] pobierz, plaintext 
#top1
{
    float: left;
}
#top2
{
    float: left;
}
#top3
{
    float: left;
}
#mid1
{
    float: left;
}
#mid2
{
    float: left;
}
#top3-2
{
    float: left;
}
#stopka1
{
    float: left;
}
#stopka2
{
    float: left;
}
.clear
{
    clear: both;
}
[HTML] pobierz, plaintext

A jak chcesz ładniej to sobie zrób 3 nowe divy i pogrupuj odpowiednio: top1 top2 top3 - mid1 mid2 top3-2 - stopka1 stopka2 i wtedy bedzie Ci łatwiej to zrobić...

Flapper

28.04.2008, 15:30:45

Tyle tylko że top3 i stopka napisałem dwa razy ze względu na rozmiar. <; to mają być pojedyncze divy.

batman

28.04.2008, 17:18:35

Wersja 1:

[HTML] pobierz, plaintext 
<style>
  #main div {
    border: 1px solid red;
  }
 
  #center, #right {
    float: left;
  }
 
  #footer {
    clear: left;
  }
</style>
 
    <div id="main">
        <div id="center">
            <div id="top">aaaaa</div>
            <div id="middle">bbbbb</div>
        </div>
        <div id="right">ccccc</div>
        <div id="footer">ddddd</div>
    </div>
[HTML] pobierz, plaintext

Wersja 2:
Ten sam kod HTML.

[HTML] pobierz, plaintext 
<style>
  <style>
  #main div {
    border: 1px solid red;
  }
 
  #center {
    float: left;
    width: 500px;
  }
 
  #main #right {
    margin-left: 500px;
  }
 
  #footer {
    clear: left;
  }
  </style>
</style>
[HTML] pobierz, plaintext

Oczywiście musisz usunąć obramowanie oraz ustawić odpowiednią szerokość div-ów.
A jeśli chcesz uzyskać efekt, że div "top3" będzie rozszerzał się razem z div-ami "top" i "middle", to napisz. Coś się wymyśli

Flapper

28.04.2008, 19:52:04

Dzięki wielkie. <;

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.