Pozycjonowanie menu


(Hadrit) #1

Witam

Mam pytanie jak zrobić żeby menu było na górze po lewej stronie a nie na dole? Bo ja mam takhttp://www.vtf.xaa.pl


(Deliverius) #2

W moim pliku .css tak to wygląda:

#menu {

float: left;

width: 20px;

}

Menu jest po lewej i ma przerwę 20px od lewej krawędzi. Aby menu było tam gdzie ty chcesz musisz się pobawić width i height.


(Hadrit) #3
body {

	background: #444444;

	margin-top: 30px;

	text-align: justify;

	font-family: Arial, Helvetica, sans-serif;

	font-size: small;

	text-align: justify;

	color: #000000;

}


h1, h2, h3, h4, h5 {

	margin: 0;

}


/* Header */


#header {

	width: 700px;

	height: 100px;

	margin: 0 auto;

	padding: 0;

	border: 10px solid #FFFFFF;

	border-bottom: none;

	background: #3366FF;

}


#header h1 {

	float: left;

	margin: 20px 0 0 20px;

	font-size: 50px;

	letter-spacing: -7px;

	color: #000033;

}


#header h2 {

	float: right;

	margin: 40px 20px 0 0;

	font-size: 18px;

	letter-spacing: -2px;

}



a {

	color: #3366FFS;

	text-decoration: none;

}


a:hover {

	color: #764B31;

	text-decoration: none;

}


.img1 {

	float: left;

	margin: 3px 15px 0px 0px;

	border: 2px solid;

}


/* Menu */


ul, ul li {

	display: block;

	list-style: none;

	margin: 0;

	padding: 0;

}


ul {

	width: 200px;

	padding: 2px 2px 1px 2px;

	background-color: #9ce;

	border: 3px double #28e;

}


ul li {

	border-bottom: 1px solid #9ce;

}


ul a:link, ul a:visited {

	display: block;

	width: 176px;

	text-decoration: none;

	padding: 7px;

	font-weight: bold;

	background-color: #27c;

	color: #def;

	border-left: 10px solid #25b;

}


ul a:hover {

	width: 166px;

	background-color: #28e;

	color: #fff;

	border-left: 20px solid #26d;

}


/* Content */


#content {

	width: 700px;

	margin: 0 auto;

	border: 10px solid #3366FF;

	border-top: none;

	background: #FFFFFF;

}


#colOne {

	float: right;

	width: 190px;

	margin-top: 20px;

	padding: 0 10px 0 20px;

}


#colTwo {

	float: left;

	margin-top: 20px;

	width: 440px;

	padding: 0 20px 0 20px;

}


#content h2 {

	margin-bottom: 20px;

	font-size: 18px;

	letter-spacing: -2px;

}



#footer {

	width: 700px;

	margin: 0 auto;

	padding-top: 20px;

}



#footer p {

	text-align: center;

	padding: 0;

	font-size: 10px;

}

tak wygląda mój plik css

-- Dodane 04.03.2012 (N) 23:21 --

i może ktoś to za mnie zmienić :frowning: bo ja nie mam pojęcia gdzie ;(


(Dimatheus) #4

Hej,

Po prostu poniższą sekcję z Twojego pliku css

#colOne {

   float: right;

   width: 190px;

   margin-top: 20px;

   padding: 0 10px 0 20px;

}

zamieniasz na taką:

#colOne {

   float: left;

   width: 20px;

   margin-top: 20px;

   padding: 0 10px 0 20px;

}

Odświeżasz stronę i gotowe. Menu jest po lewej stronie u góry - zaraz pod logotypami marek samochodów. :slight_smile:

Pozdrawiam,

Dimatheus


(Hadrit) #5

ale mi chodziło o to żeby logo było pod nagłówkiem po lewej stronie


(Dimatheus) #6

Hej,

Jakie logo? Przecież na tej stronie nie ma loga? Co i gdzie ma być? Może pokażesz to na jakimś innym przykładzie?

Pozdrawiam,

Dimatheus


(Hadrit) #7

boże, przepraszma że napisaęłm chodziło mi o to żeby menu było pod niebieskiem nagłówkiem


(Dimatheus) #8

Hej,

To może zrób chociażby w Paint'cie poglądowy obrazek, jak to ma wyglądać. Dodatkowo przejrzyj plik css - brakuje w nim zdefiniowania kilku div'ów, które znajdują się w pliku html.

Pozdrawiam,

Dimatheus


(manieKMP) #9

Masz najwyraźniej złą kolejność wpisów w html-u.

Poniższa partia kodu powinna być bezpośrednio pod

.

Witamy na stronie.

[/code] Ale aktualnie rozbije to stronę, ponieważ nie są pewne rzeczy określone. Ogólnie trochę poprawek potrzeba by doprowadzić to do ładu. Ogólnie można by objąć te obrazki w diva, np. z identyfikatorem "marki" i w css określić mu potrzebne własności, takie jak odpowiednią szerokość i float na prawą (skoro menu miałoby na lewą stronę iść). Poza tym po css-ie wnioskuję, że ktoś usuną element/kolumnę "colTwo" ze strony - nie wiem po co. Poprawki na szybkiego mogłyby wyglądać tak: Dla html, część "content"
[code]

Witamy na stronie.

text_most_popular_brands.gif


(Dimatheus) #10

Hej,

Skoro jesteśmy przy optymalizacji i poprawie błędów, to przydałoby się w pliku html zdefiniować wartości dla poniższych znaczników.

I jeszcze jedno - przenieść te wewnętrzne arkusze stylów do pliku css. Gdy będziesz chciał zmienić główny wygląd strony, będziesz musiał klepać go w każdej z utworzonych podstron. Po to wymyślono style kaskadowe w osobnych plikach, by tylko jeden z nich zmieniać, gdy chcemy zmienić wygląd strony. :slight_smile:

PS. Widzę, że strony na www już wprowadzone.

Pozdrawiam,

Dimatheus


(Hadrit) #11

bardzo dziekuje za pomoc !!