Forum PHP.pl > [HTML][CSS] br oddala footer

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] br oddala footer

Terrorizer

10.06.2014, 23:07:05

Cześć,
Mam bardzo irytujący problem, którego od wczoraj nie potrafię pokonać.
Mam prostą stronę, na której umieściłem kawałek tekstu w paragrafie. Chciałem oddalić od siebie linijki tego tekstu za pomocą br.
Za każdym razem gdy dodaję br, oddala mi się footer, strona staje się nienaturalnie długa i nie umiem temu zaradzić.
CSS wygląda tak:

Kod

#tekst{
font-family:serif,Arial;
font-size:18px;
position:relative; bottom:450px; left:120px;
}

#orangefooter{
box-shadow: 3px 3px 5px grey, -5px -5px 10px grey;
width:auto;
height:60px;
background:#ff6f2a;
}

Jednak tekst w pliku html wygląda tak jak poniżej. Każde kolejne br wydłuża całą stronę tworząc pustą przestrzeń w dół strony, mimo że tekst wygląda ładnie tak jak zamierzyłem.

Kod

Witamy, 

Jesteśmy firmą zajmującą się
wywozem nieczystości płynnych. 

Gwarantujemy! : 

- Punktualność 

- szybkie i rzetelne wykonanie usługi 

- niskie ceny

Zamieszczę też link, jak to wygląda w przeglądarce:

slash^

10.06.2014, 23:25:38

Podaj linka, przyczyna moze leżeć w miejscu, którego tu nie pokazałeś.

Terrorizer

10.06.2014, 23:44:24

Odpalam to na z pulpitu w przeglądarce. Mogę wkleić cały kod.

index:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8">
<title>Wywóz szamb, Marek Gębicki</title>
<link rel="stylesheet" type="text/css" href="css\res.css">
<link rel="stylesheet" type="text/css" href="css\index.css">
</head>
 
<body>
<div id="all">
<div id="orangeheader">
<div id="logo">
<img src="img\logo.gif" alt="logo"> 
</div>
</div>
 
 
 
 
<div id="contentbox">
<img src="img\contentbox.gif" alt="contentbox">
 
<div id="contentmenu">
<a href="/promocje"><h4 class="contentmenu">|&nbsp; Promocje &nbsp;|&nbsp;</h4></a>
<a href="/cennik"><h4 class="contentmenu"> Cennik &nbsp;|&nbsp;</h4></a>
<a href="/index"><h4 class="contentmenu"> O firmie &nbsp;|&nbsp;</h4></a>
<a href="/znajdznas"><h4 class="contentmenu"> Znajdź nas &nbsp;|</h4></a>
</div>
 
<div id="onas">
<p>Witamy,<br/><br/>
 
Jesteśmy firmą zajmującą się 
wywozem nieczystości płynnych.<br/><br/><br/><br/>
 
<strong>Gwarantujemy!</strong> :<br/><br/>
 
- Punktualność<br/><br/>
 
- szybkie i rzetelne wykonanie usługi<br/><br/>
 
- niskie ceny</p>
</div>
 
</div>
 
 
<div id="orangefooter">
</div>
</div>
</body>
 
</html>
[HTML] pobierz, plaintext

css:

Kod

body{
background-color:#f8f8f8;
width:1200px;
margin:auto;
}

#orangeheader{
box-shadow: 5px 5px 10px grey, -3px -3px 5px grey;
margin-top:40px;
width:auto;
height:188px;
background:#ff6f2a;
}

#logo{
margin-left:15%;
padding:55px;
}

#contentbox{
margin-left:15%;
padding-top:50px;
}

.contentmenu{
display:inline;
position:relative; bottom:540px; left:455px;
font-size:17px;
}

#onas{
font-family:serif,Arial;
font-size:18px;
position:relative; bottom:450px; left:120px;
}

a{
text-decoration:none;
color:black;
}

#orangefooter{
position:relative;
box-shadow: 3px 3px 5px grey, -5px -5px 10px grey;
width:auto;
height:60px;
background:#ff6f2a;
}

Damonsson

11.06.2014, 00:05:50

Co to za:

[CSS] pobierz, plaintext 
bottom:450px;
[CSS] pobierz, plaintext

[CSS] pobierz, plaintext 
bottom:540px;
[CSS] pobierz, plaintext

?

Tak się nie robi, bo wychodzą cyrki jak widzisz, zapraszam do zapoznania się z pierwszym lepszym kursem HTML.

Terrorizer

11.06.2014, 00:58:00

Usilowalem w ten sposob wypchnąć elementy do góry.
Dzieki za wskazanie bledu, poczytam o tym jak najwiecej, chociaz przerabialem juz nie jeden samouczek, a w praktyce trudno uchronić sie przed bledami

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.