Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] br oddala footer
Terrorizer
post 10.06.2014, 23:07:05
Post #1





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 31.03.2012

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

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


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











Ten post edytował Terrorizer 10.06.2014, 23:22:28
Go to the top of the page
+Quote Post
slash^
post 10.06.2014, 23:25:38
Post #2





Grupa: Zarejestrowani
Postów: 278
Pomógł: 36
Dołączył: 9.04.2003
Skąd: Płock

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

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


--------------------
d(^^)b
Go to the top of the page
+Quote Post
Terrorizer
post 10.06.2014, 23:44:24
Post #3





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 31.03.2012

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

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

index:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Wywóz szamb, Marek Gębicki</title>
  7. <link rel="stylesheet" type="text/css" href="css\res.css">
  8. <link rel="stylesheet" type="text/css" href="css\index.css">
  9. </head>
  10.  
  11. <body>
  12. <div id="all">
  13. <div id="orangeheader">
  14. <div id="logo">
  15. <img src="img\logo.gif" alt="logo"> 
  16. </div>
  17. </div>
  18.  
  19.  
  20.  
  21.  
  22. <div id="contentbox">
  23. <img src="img\contentbox.gif" alt="contentbox">
  24.  
  25. <div id="contentmenu">
  26. <a href="/promocje"><h4 class="contentmenu">|&nbsp; Promocje &nbsp;|&nbsp;</h4></a>
  27. <a href="/cennik"><h4 class="contentmenu"> Cennik &nbsp;|&nbsp;</h4></a>
  28. <a href="/index"><h4 class="contentmenu"> O firmie &nbsp;|&nbsp;</h4></a>
  29. <a href="/znajdznas"><h4 class="contentmenu"> Znajdź nas &nbsp;|</h4></a>
  30. </div>
  31.  
  32. <div id="onas">
  33. <p>Witamy,<br/><br/>
  34.  
  35. Jesteśmy firmą zajmującą się 
  36. wywozem nieczystości płynnych.<br/><br/><br/><br/>
  37.  
  38. <strong>Gwarantujemy!</strong> :<br/><br/>
  39.  
  40. - Punktualność<br/><br/>
  41.  
  42. - szybkie i rzetelne wykonanie usługi<br/><br/>
  43.  
  44. - niskie ceny</p>
  45. </div>
  46.  
  47. </div>
  48.  
  49.  
  50. <div id="orangefooter">
  51. </div>
  52. </div>
  53. </body>
  54.  
  55. </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;
}


Ten post edytował Terrorizer 10.06.2014, 23:46:40
Go to the top of the page
+Quote Post
Damonsson
post 11.06.2014, 00:05:50
Post #4





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

Co to za:

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

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

?

Tak się nie robi, bo wychodzą cyrki jak widzisz, zapraszam do zapoznania się z pierwszym lepszym kursem HTML.
Go to the top of the page
+Quote Post
Terrorizer
post 11.06.2014, 00:58:00
Post #5





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 31.03.2012

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

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
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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 8.07.2025 - 07:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn