Skocz do zawartości

Problem z poprawnym zakodowaniem menu w tym layoucie

qba505

Przez qba505,
w HTML i CSS

 Udostępnij

Rekomendowane odpowiedzi

qba505 Newbie

qba505

Opublikowano
Opublikowano

Witam, narysowałem sobie taki oto design

21253443542575954650_thumb.jpg

Zaczynam kodować do html/css i na wstepie mam problem z menu. Niby wszystko wygląda ok ale jak zmniejszam okno przeglądarek jest taki oto dziwny efekt

31990951446836301043_thumb.jpg

Obecnie mój kod wyglada tak:

@charset "utf-8";
/* CSS Document */

html, ul, li, a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;}

body {
background:url(images/body-bg.gif) repeat;
font-family: Tahoma, Verdana, Arial, "Trebuchet MS", sans-serif;
margin: 0;
padding: 0;}


.kontener {
width: 910px;
}

#menu-gora {
background: url(images/menu-gorne-bg.gif) repeat-x top;
height: 37px;
width: 100%;}

#menu-gora ul {
overflow: hidden;}

#menu-gora ul li {
float: left;
padding-top: 13px;
padding-right: 20px;}

#menu-gora ul li a {
display: block;
font-family: Tahoma, sans-serif;
font-size: 11px;
color: #dbdbdb;}

<body>
<div id="menu-gora">
<div class="kontener">
	<ul>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Współpraca</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">Reklama</a></li>
	</ul>
</div>
</div>
</body>

Chciałem zdefiniować sobie klase kontener i ustawić szerokość tresci strony, po czym wysrodkować tą zawartość żeby to wyszło tak jak na projekcie.

Poradźcie co z tym zrobić. Aha odnosnie wysrodkowania juz moglbym sobie odpuscic zakodowac resztę i dopiero na koniec obrac to w duży div ktory to wysrodkuje... da się tak ?

Odnośnik do komentarza
Udostępnij na innych stronach
websign Newbie

websign

Opublikowano
Opublikowano

Żeby wyśrodkować dodać margin: 0 auto; do .kontener i text-align: center; do #menu-gora.

Wszystko poniżej możesz wrzucić z jednego diva który środkuje zawartość z wyjątkiem stopki oczywiście bo trzeba zrobić tak samo jak z górą.

Skuteczne pozycjonowanie stron www | Nowe randki internetowe

Odnośnik do komentarza
Udostępnij na innych stronach
Karlosky Newbie

Karlosky

Opublikowano
Opublikowano

A tak w ogóle, to bardzo fajny layout ;)

Moje skromne przemyślenia na temat pozycjonowania próbuję przedstawiać na blogu -> https://blog.karlosky.pl
Osoby zainteresowane współpracą w zakresie SEO zapraszam na stronę www.topmaker.pl oraz https://pozycjonowanie-bialystok.pl

Odnośnik do komentarza
Udostępnij na innych stronach
qba505 Newbie

qba505

Opublikowano
  • Autor
Opublikowano
Żeby wyśrodkować dodać margin: 0 auto; do .kontener i text-align: center; do #menu-gora.

Wszystko poniżej możesz wrzucić z jednego diva który środkuje zawartość z wyjątkiem stopki oczywiście bo trzeba zrobić tak samo jak z górą.

dzięki za radę, menu jest teraz wyswietlane tak jak chciałem, ale nadal jest problem z tym niepełnym szarym tłem menu w momencie gdy zmiejszam okno przegladarki tak jak na screenie z pierwszego postu.

Odnośnik do komentarza
Udostępnij na innych stronach
fuser Newbie

fuser

Opublikowano
Opublikowano (edytowane)

Aaaa, bo Tobie chodzi o te górne menu? To jeszcze łatwiej. To będzie tak:

<div class="tlo-szare">

 <div class="wysrodkowanie">

<ul>

  <li><a href="">Pozycja mnue</a></li>
  <li><a href="">Pozycja mnue</a></li>
  <li><a href="">Pozycja mnue</a></li>
  <li><a href="">Pozycja mnue</a></li>

</ul>

<input type="text">

 </div>

</div>

.tlo-szare{
width: 100%;
padding: 0px;
height: 20px;
background: url(img/obrazek.jpg);
}

.wysrodkowanie{
width: 910px;
height: 20px;
margin: auto;
position: relative;
}

Jakoś tak to będzie. Czyli Twój .kontener to właściwie moje .wysrodkowanie, a #menu-gora to moje .tlo-szare

Edytowane przez fuser
Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności

  Zgadzam się.