Skocz do zawartości

Problem z poprawnym zakodowaniem menu w tym layoucie

qba505

Przez qba505
w HTML i CSS

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

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

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

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