Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][SOLVED]pp div względem 3 boków
rokefeler15
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 14.08.2007

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


Witam,
Mam nadzieję, że temat nie jest po raz enty taki sam... Niestety nie udało mi się znaleźć odpowiedzi na pytanie na forum ani w googlach mimo ponad godziny poświęconej na przeglądanie różnych stron.
Chciałbym zbudować prosty layout, w którym treść znajdowała by się w warstwie oddalonej o stałą wartość (20px) od prawej, górnej i dolnej krawędzi przeglądarki. Chciałbym ustalić procentową wartość szerokości, natomiast wysokość chciałbym żeby była dostosowana do założenia o oddaleniu od krawędzi.
Do celów testowych stworzyłem taką oto stronę:

CODE
<head>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque.
</div>
</body>


Oraz taki oto plik style.css:
CODE
body {
background-color: green;
background-image: url(obraz.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}

div{
background-color: white;
background-image: url(obraz1.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
left: auto;
right: 20px;
top: 20px;
bottom: 20px;
width: 60%;
border-top-width: 5mm; border-top-style: solid;
border-bottom-width: 5mm; border-bottom-style: solid;

}



Posiadam przeglądarki: google chrome, opera oraz mozilla firefox. Wszystkie w najnowszych wersjach.
W dwóch pierwszych test wypadł pomyślnie. Efekt zamierzony osiągnięty.
Jednak w firefoxie obie części bordera (górna i dolna) zbiły się w jedną (tak jakby wysokość była równa zero), natomiast tekst ukrył się na dolnym borderze (przy większej ilości tekstu, opuszcza on swobodnie krawędź i wchodzi na zielone tło)

Pytanie chyba oczywiste ;-) Co robię nie tak.
Z góry dziękuję za odpowiedź i pozdrawiam
rokefeler15

Ten post edytował rokefeler15 5.03.2009, 09:29:10
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 4)
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




  1. Kod
    border-top-width: 5mm;

    Na ekranie używaj jednostek ekranu, a nie drukarskich, etc.
  2. daj gdzieś działający przykład
Go to the top of the page
+Quote Post
rokefeler15
post
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 14.08.2007

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


Ad 1. Będę się tego trzymał, dziękuję ;-)
Ad 2. http://fiedukowicz.abajt.pl/ly/
Wrzucone pliki których kod wyżej podałem

Dodam jeszcze, że taki sam efekt uzyskuję, gdy używam <p></p> zamiast <div></div>
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




overflow:hidden dla rodzica albo wyzeruj marginesy dla <p />.
Go to the top of the page
+Quote Post
rokefeler15
post
Post #5





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 14.08.2007

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


Jeśli dobrze zrozumiałem (co powinienem zrobić), to niestety nie pomogło.

=======================================

Edit: position: relative; należy wywalić z body. To pomogło ;-)
Problem rozwiązany
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 21.12.2025 - 02:12