Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z ułożeniem szablonu
Forum PHP.pl > Forum > Przedszkole
adrianozo
18.09.2010, 09:17:37
Witam wszystkich. Mam problem z ułożeniem szablonu.

Aktualnie wygląda to tak:

http://img697.imageshack.us/f/asdcb.png/

A chcę, żeby wyglądało tak:

http://img192.imageshack.us/f/2asd.png/

Kod html:
[HTML] pobierz, plaintext 
  1. <div id="gora">
  2.     <div id="logo">
  3.         <a href=""></a>
  4.     </div>
  5.     <div id="menu_1">
  6.     </div>
  7.     <div id="menu">
  8.         <a href="">Home</a>
  9.         <a href="/portfolio.html">Portfolio</a>
  10.         <a href="/oferta.html">Oferta</a>
  11.         <a href="/o_mnie.html">O mnie</a>
  12.         <a href="/kontakt.html">Kontakt</a>
  13.     </div>
  14.     <div id="menu_2">
  15.     </div>
  16.     <div class="wyszukiwarka">
  17.         <?php
  18.         if(isset($_GET['wynik'])) 
  19.         {
  20.             $wynik_filtru = urlencode(trim(strip_tags($_GET['wynik'])));
  21.         }
  22.         if(isset($_POST['wynik']))
  23.         {
  24.             echo '<div class="wyszukiwarkas"><form action="http://www.nportfolio.pl/szukaj.html" method="post">
  25.             <input type="text" name="wynik" value="'.$_POST['wynik'].'" class="texts" />
  26.             <input type="image" name="submit" src="images/gszukaj.png" value=" " class="submits" />
  27.             </form></div>';
  28.         }
  29.         else
  30.         {
  31.             echo '<div class="wyszukiwarkas"><form action="http://www.nportfolio.pl/szukaj.html" method="post">
  32.             <input type="text" name="wynik" value="Szukaj w serwisie..." onclick="this.value=\' \'" class="texts" />
  33.             <input type="image" name="submit" src="images/gszukaj.png" value=" " class="submits" />
  34.             </form></div>';
  35.         }
  36.         ?>
  37.     </div>
  38. </div>
[HTML] pobierz, plaintext


KOD CSS:
Kod
div#gora
{
}
#logo
{
width: 244px;
height: 164px;
background: url(image/logo.gif) repeat-y;
}
#logo  a
{
width: 244px;
height: 164px;
background: url(image/logo.gif) repeat-y;
}
div#menu_1
{
width: 42px;
height: 41px;
background-image: url(image/bg_lay_05.gif);
margin: 0 auto;
}
div#menu
{
margin: 0 auto;
width: 43%;
height: 41px;
background: url(image/bg_lay_07.gif) repeat-x;
}
div#menu a
{
font-weight: bold;
padding: 10px 0 0 0;
font-size: 17px;
font-style: italic;
display: inline-block;
text-decoration: none;
color: #FFFFFF;
margin-right: 20px;
margin-left: 20px;
height: 41px;
text-align: center;
}
div#menu a:hover
{
font-weight: bold;
color: #3399FF;
}
div#menu_2
{
width: 12px;
height: 41px;
background-image: url(image/bg_lay_09.gif);
margin: 0 auto;
}


Problem w tym, że nie wiem co dać w kontenerze div#gora, żeby wyglądało tak jak na drugim obrazka.

Proszę o pomoc.
Z góry dziękuje smile.gif
Daiquiri
18.09.2010, 09:23:26
Dodaj float do elementów, które mają być obok siebie.
adrianozo
18.09.2010, 09:24:16
A z jakim argumentem ten float?
Daiquiri
18.09.2010, 09:28:50
float: left lub float: right - zależy w którą stronę mają być opływane, zerknij w przykłady.
adrianozo
18.09.2010, 12:35:01
Dzięki wielkie smile.gif

Proszę nie zamykać tematu bo jak będę miał dalej problem to napisze tutaj smile.gif

Nadszedł kolejny problem

Kod
div#tresc_prawa
{
width: 284px;
height: 351px;
background: url(image/bg_lay_34.gif);
float: left;
}
div#tresc_dol
{
width: 790px;
height: 187px;
background: url(image/bg_lay_46.gif);
float: left;
}


HTML
[HTML] pobierz, plaintext 
  1. <div id="tresc_prawa">
  2. asda
  3. </div>
  4. <div id="tresc_dol">
  5. qwerty
  6. </div>
[HTML] pobierz, plaintext


Nie dość, że nie pokazuje się obrazek to treść też nie

EDIT_1

Ok już wiem dlaczego. Był problem z bazą danych i skrypt dalej nie przechodził.

EDIT_2

Mam problem

Po wejściu w zakładkę, gdzie jest więcej info szablon się nie rozszerza.

http://www.nportfolio.c0.pl/index.php?page=portfolio
Daiquiri
18.09.2010, 14:55:44
Zacznijmy od tego, że pod FF rozjeżdża się nawet strona startowa smile.gif.
gigzorr
18.09.2010, 15:14:02
co to tak sie wszystko rozjeżdża ?
moze zacznij tak :
[PHP] pobierz, plaintext 
  1.  
  2. * { padding: 0;
  3.      margin: 0;
  4. }
  5.  
  6. body {margin-left: auto;
  7.           margin-right: auto;
  8.           width: 1024px;
  9.           text-align: center; 
  10. }
[PHP] pobierz, plaintext


dla elementow nadawaj float + marginesy to bedzie ok , a jak chcesz zeby pod ie tez bylo ok to dochodzi clear: both.
adrianozo
18.09.2010, 17:07:49

W sumie to już zrobione. Teraz tylko muszę poprawić grafikę, bo tło jest przejściowe....

No to mam poważny problem. W IE 6.0 Wszystko się posypało. Czego to może być wina?

http://www.nportfoli.c0.pl
gigzorr
18.09.2010, 17:10:56
Cytat(adrianozo @ 18.09.2010, 18:07:49 ) *
W sumie to już zrobione. Teraz tylko muszę poprawić grafikę, bo tło jest przejściowe....

No to mam poważny problem. W IE 6.0 Wszystko się posypało. Czego to może być wina?

http://www.nportfoli.c0.pl



w pytaniu masz odpowiedz smile.gif
adrianozo
18.09.2010, 17:31:14
Tak, ale z wcześniejszą grafiką nie mam problemu.

http://www.nportfoli.pl
bemol
18.09.2010, 17:37:40
Wszystkim divom które są w jednej linii dodaj:
Kod
display:inline;

div#gora powinien mieć określoną wysokość i szerokość.
adrianozo
19.09.2010, 10:07:02
Kod
display: inline;


Trochę pomógł, chociaż nie do końca

Lepiej stworzyć nowy styl do ie czy coś innego?

Pamięta ktoś była taka strona co tam podawałeś link do strony, czekałeś i generowało widok w przeglądarkach i systemach, które się wybierze. browse coś tam czy coś takiego?
Daiquiri
19.09.2010, 10:08:41
http://browsershots.org/ ?
adrianozo
19.09.2010, 10:20:00
Po niektórych poprawkach zostały tylko dwa błędy:

IE:

http://img545.imageshack.us/f/89815366.png/

Firefox,Opera,Chrome

http://img535.imageshack.us/f/inneh.png/

W ie wyszukiwarka jest dobrze ustawiona w firefox, chrome i operze jest za blisko menu

W ie występuje pasek, którego nie powinno być. Wszystko jest na ss'ach.

LINK: http://www.nportfolio.c0.pl

Dokładnie ta strona.
potreb
19.09.2010, 10:20:29
Po co ci IE 6, większość firm już nie robi stron pod IE 6, IE6 = Kick out

I jeszcze taka sprawa, ja zawsze robię reset stylów, wtedy pod większością przeglądarek nie mam problemów smile.gif
adrianozo
19.09.2010, 10:23:08
Tak, ale bardzo dużo osób korzysta jeszcze z IE6
Damonsson
19.09.2010, 12:07:53
Tak, 3,76% użytkowników internetu. Faktycznie multum
adrianozo
19.09.2010, 14:05:35
Czyli co? Olać IE6?

Kurde każda przeglądarka jaką posiadam inaczej reaguje na styl. W Chrome i Operze wszystko jest już OK. W Firefox źle wyszukiwarka i troszkę menu, natomiast w IE wszystko jest posypane....
Daiquiri
19.09.2010, 14:30:33
W Firefoksie wyszukiwarka jest OK, ale elementy menu mają za duże marginesy i się chyba nie mieszczą.
adrianozo
19.09.2010, 14:33:59
Niestety wyszukiwarka w firefox nie jest ok bo brakuje jednego obrazka z lewej strony takiego zaokrąglenie. Na chrome i Operze jest a tutaj nie ma
gigzorr
19.09.2010, 14:36:07
u mnie jest zaokraglenie z lewej w wyszukiwarce.
Daiquiri
19.09.2010, 14:38:00
U mnie to wygląda tak pod firefoksem: klik
adrianozo
19.09.2010, 14:42:40
No i tak powinno wyglądać. Wszystko jest ok oprócz IE oraz u mnie firefox nie czyta dwóch grafik. Zaokrąglenia menu z prawej i zaokrąglenia wyszukiwarki z lewej. Nie mam pojecie dlaczego
gigzorr
19.09.2010, 14:44:17
ctrl + r albo ctrl + f5 az sie odswiezy.
adrianozo
19.09.2010, 14:45:57
EDIT:

Wgrałem obrazki na nowo i jest ok. Teraz tylko ten wkurzający IE:

http://img843.imageshack.us/f/91963033.png/
potreb
19.09.2010, 15:02:51
Zainstaluj sobie "Internet Explorer Platform Preview" masz debugowanie stron od 5 do 9.
5 i 6 olać. Zresetuj najpierw style, używaj borderów dla elementów, żebyś widział co jest nie tak.

Po drugie:

[HTML] pobierz, plaintext 
  1. <div id="wyszukiwarka_1">
  2. 	</div>
  3. 	<div class="wyszukiwarka">
  4. 		<div class="wyszukiwarkas"><form action="/szukaj.html" method="post">
  5. 			<input type="text" name="wynik" value=" Szukaj w serwisie..." onclick="this.value=' '" class="texts" />
  6. 			<input type="image" name="submit" src="image/bg_lay_20.gif" value=" " class="submits" />
  7. 			</form></div>	</div>
  8. </div>
[HTML] pobierz, plaintext


Ten sposób jest beznadziejny, nadajesz tła dla elementów div i input. Dlaczego nie zrobisz dla samego inputa tła i submit button?

Zresztą jak chcesz przedstawiać komuś swoją ofertę najpierw naucz się podstaw.
adrianozo
19.09.2010, 15:25:43
Już nie wiem co mam zrobić. Pogubiłem się ;/ ...
Daiquiri
19.09.2010, 15:40:00
Proponuję zabrać się do "cięcia" raz jeszcze, wg następujących punktów:
1. Jak już niejednokrotnie sugerował potreb - zresetuj style css. Wystarczy na samym początku podpiąć plik css, który będzie wszystkie wartości "zerował", coś na zasadzie:
[CSS] pobierz, plaintext 
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a (...) {
  4. margin: 0; padding: 0; border: 0; itd.
  5. }
[CSS] pobierz, plaintext
2. Tnij stronę powoli i na bieżąco zerkaj w przeglądarki. Będzie Ci łatwiej wyłapać, co powoduje różne wyświetlanie poszczególnych elementów.
3. Powtarzaj punkt drugi, aż skończysz smile.gif.
adrianozo
19.09.2010, 15:58:19
Tylko, że grafikę ciął mi grafik. Ja mam z tym problem...
potreb
19.09.2010, 16:31:46
Tu masz opisany reset stylów, nawet pod html 5.

http://perfectionorvanity.com/reset.html

Co do grafiki, to odrzuca. Elementy menu nawigacyjnego nie są wg mnie poprawne wypozycjonowane. Zainteresuj się samym css i html, możesz stworzyć niezły szablon używając minimalną ilość grafiki, reszta to kod.
adrianozo
19.09.2010, 17:45:31
EDIT_2

Błędy praktycznie zażegnane. Jedyne co mnie nurtuje to:

http://img522.imageshack.us/f/asdrw.png/
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.