PDA

Zobacz pełną wersję : Pozycja menu w lewo CSS



passa
13-09-2013, 12:26
Udało mi się już wiele zmienić w obecnym wyglądzie za pomocą css, poprzestawiać równe elementy. Ale nie potrafię rozgryźć, gdzie jest miejsce pozycji top menu. Pozamieniałam już nawet wszystkie right na left i nic nie dało (Chcę menu przesunąć w lewo). Wróciłam do stanu pierwotnego. Czy ktoś mógłby rzucić na to okiem? Będę bardzo wdzięczna.



/* Header
/************************************************** ************************************/
/************************************************** ************************************/


#header
{
width: 100%;
margin: 0px 0px 0px 0px;
}

#header .content
{
margin: 0px auto 0px auto;
overflow: visible;
}

#header.home .content
{
margin: 0px auto 0px auto;
overflow: visible;
}

#breadcrumb
{
height: 40px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(../images/bg.header.row2.png);
background-repeat: repeat-x;
background-position: left top;
}

.breadcrumbs
{
padding: 13px 0px 0px 0px;
}

.breadcrumbs span
{
}

#breadcrumb a
{
border: none;
}

#breadcrumb a:hover
{
}

/************************************************** ************************************/
/* Header Row 0 */

#header .row0
{
height: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#header .row0 .search input
{
float: right;
width: 150px;
height: 18px;
margin: 5px 0px 0px 8px;
padding: 0px 40px 6px 3px;
background-color: transparent;
background-image: url('../images/bg.search.png');
background-repeat: no-repeat;
background-position: top right;
}

/********** Top Menu ************************************************** *************/

#header .row1 #topmenu
{
height: 30px;
margin: 15px auto 0px auto;
padding: 0px 0px 0px 0px;
position: relative;
z-index: 20;
text-align: center;
}

#header .row1 #topmenu ul.menu
{
float: right;
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
list-style-type: none;
overflow: visible;
}

#header .row1 #topmenu ul.menu li
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 20px;
position: relative;
list-style: none;
background: none;
z-index: 100;
overflow: visible;
display: none;
}

#header .row1 #topmenu ul.menu li .submenubottom
{
padding-bottom: 16px;
}

#header .row1 #topmenu ul.menu li.toplevel
{
background-image: url(../images/sep.menu.png);
background-repeat: no-repeat;
background-position: right top;
height: 40px;
}

#header .row1 #topmenu ul.menu li a
{
display: block;
padding: 0px 6px 0px 6px;
font-weight: normal;
text-decoration: none;
border: none;
border-style: none;
outline-style: none;
position: relative;
}

#header .row1 #topmenu ul.menu li.current a,
#header .row1 #topmenu ul.menu li.active a,
#header .row1 #topmenu ul.menu li.actives a,
#header .row1 #topmenu ul.menu li:hover a
{
display: block;
}

#header .row1 #topmenu ul.menu li span
{
display: block;
}

#header .row1 #topmenu ul.menu ul
{
width: 200px;
display: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
top: 40px;
left: 3px;
position: absolute !important;
z-index: 0 !important;
overflow: visible;
text-shadow: none;
}

#header .row1 #topmenu ul.menu > ul > li
{
float: none !important;
}

#header .row1 #topmenu ul.menu ul li
{
width: 200px;
height: 20px;
margin: 0px 0px 0px 0px;
padding: 13px 0px 2px 0px;
}

#header .row1 #topmenu ul.menu ul li a
{
margin: 0px 0px 0px 0px !important;
padding: 5px 0px 0px 20px !important;
text-align: left;
display: block;
text-decoration:none;
outline-style: none;
border: none;
background-image: none;
}

#header .row1 #topmenu ul.menu li.current ul a,
#header .row1 #topmenu ul.menu li.active ul a,
#header .row1 #topmenu ul.menu li.actives ul a,
#header .row1 #topmenu ul.menu li:hover ul a
#header .row1 #topmenu ul.menu ul li a,
#header .row1 #topmenu ul.menu ul li a:hover
{
background-image: none;
}

#header .row1 #topmenu ul.menu ul li.parent
{
background-position: top right;
}

#header .row1 #topmenu ul.menu ul ul
{
width: 200px;
display: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 1px;
top: 0px;
left: 200px;
background-color: transparent;
}

#header .row1 #topmenu ul.menu ul ul li
{
width: 200px;
}

#header .row1 #topmenu ul.menu ul ul li a
{
padding: 0;
text-align: left;
display: block;
text-decoration: none;
}

#header .row1 #headerimg
{
float: right;
}


/************************************************** ************************************/
/* Row 2 */


#header .row2
{
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
overflow: hidden;
}

#header .row2 .content
{
overflow: hidden;
}

#header .row2 .row2col1
{
float: left;
min-height: 0%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#header .row2 .row2col2
{
float: right;
min-height: 0%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#header #breadcrumb
{
}

/************************************************** ************************************/
/* Header Row 3 */

#header .row3
{
width: 100%;
padding: 0px;
margin: 0px 0px 25px 0px;
text-align: center;
background-color: transparent;
}

#header .row3 .content
{
margin: 0px auto 0px auto;
}

#header .row3 p
{
padding: 0px 0px 15px 0px;
}

#header .row3 #pagetitle h1
{
padding: 0px 35px 0px 35px;
}

/************************************************** ************************************/
/* Row 4 */

#header .row4
{
padding: 0px;
margin: 0px 0px 25px 0px;
text-align: justify;
overflow: hidden;
}

#header .row4 h1,
#header .row4 h2,
#header .row4 h3
{
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
overflow: hidden !important;
text-shadow: none;
}

#header .row4 p
{
clear: both;
padding: 0px 0px 0px 0px;
}

#header .row4 p.intro
{
clear: both;
padding: 0px 0px 0px 0px;
}

#header .row4 p img
{
margin: 2px 0px 0px 0px;
}

#header .row4 p.readmore
{
margin: 20px 0px 20px 0px !important;
}

#header .row4 .modtoggle_content .modtoggle_preview p.readmore
{
margin: 20px 0px 0px 0px !important;
}

#header .row4 li
{
list-style: none outside none;
padding: 0px 0px 0px 20px;
}

#header .row4 .content
{
overflow: hidden;
}

#header .row4 .moduletable
{
margin: 0px 0px 0px 0px;
padding: 25px 25px 25px 25px;
}

#header .row4 .row4col1,
#header .row4 .row4col2,
#header .row4 .row4col3,
#header .row4 .row4col4
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

#header .row4 .row4col1.closed,
#header .row4 .row4col2.closed,
#header .row4 .row4col3.closed,
#header .row4 .row4col4.closed,
#header .row4 .sepleft_30.closed
{
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
display: none;
}

#header .row4 p.btn_open
{
display: block;
}

#header .row4 p.btn_close
{
display: none;
}

#header .row4 .row4col1 .modtoggle_preview p.img.left,
#header .row4 .row4col2 .modtoggle_preview p.img.left,
#header .row4 .row4col3 .modtoggle_preview p.img.left,
#header .row4 .row4col4 .modtoggle_preview p.img.left
{
width: 100%;
float: left;
}

#header .row4 .row4col1 .modtoggle_preview p.img.right,
#header .row4 .row4col2 .modtoggle_preview p.img.right,
#header .row4 .row4col3 .modtoggle_preview p.img.right,
#header .row4 .row4col4 .modtoggle_preview p.img.right
{
width: 100%;
float: right;
}

#header .row4 ul
{
clear: none;
}

#header .row4 img.left
{
margin: 0px 20px 10px 0px;
}

#header .row4 img.right
{
margin: 0px 0px 10px 20px;
}

AoW
13-09-2013, 12:51
passa, latwiej byloby pomoc, jesli dalabys link do swojej strony. Sam CSS problemu nie rozwiazuje, nie wiadomo dgzie div z top menu sie znajduje.

passa
13-09-2013, 13:02
Dziękuję za szybką odpowiedź. Niestety moja strona jest jeszcze na komputerze...

Ale kupiłam ten szablon i staram się z nim robić różne kombinacje (z różnym skutkiem). http://www.asdesigning.com/demo/asj37/
Czy to wystarczy?

Wcześniej nie mogłam podnieść menu do góry, ale usnęłam dane o logo z php i się udało. Może też coś jeszcze muszę usunąć?

AoW
13-09-2013, 13:05
Tak, wystarczy, tylko teraz nie wiem tak naprawde co chcesz osiagnac. TOPMenu znajduje sie w headerze. Chcesz przeniesc menu do lewej kolumny tam gdzie jest WE ARE OFFERING?

passa
13-09-2013, 13:16
Tutaj wrzuciłam na chwilkę obrazek. Nie potrafię go przesunąć w lewo i zrównać z lewą częścią strony. Co dziwne, potrafię przesunąć searchbox i breadcrumbs. A top menu nie... i nie potrafię znaleźć przyczyny.
http://www.silat-sigepi.de/Unbenannt.png

AoW
13-09-2013, 13:23
dla row1col1 dodalem width:100%
dla row1col2 zmienilem float:left oraz wywalilem height oraz margin
i top menu wskoczylo na lewa strone pod logo.

Zaprezentowany screen sie rozni troche od czesniejszego linka, wiec nie wiem czy masz takie same klasy etc.

passa
13-09-2013, 13:57
OK, dziękuję. Postaram się to jakoś zastosować. Piszę "jakoś", bo popróbowałam teraz na szybko i mi coś nie wyszło. No ale trening czyni mistrza. Może z czasem uda mi się zrobić to poprawnie. Przynajmniej wiem już, gdzie mam szukać (np. usunięcie height i margin)

Jeszcze raz dziękuję za pomoc. Jak mi się uda, to dam znać.

AoW
13-09-2013, 13:59
Najlepiej byloby, jakbys wrzucila strone do sieci, wtedy dokladnie moglbym podac korekty w CSSie. Usuniecie height oraz margin + dodanie width 100% dla sasiedniego diva w tym przypadku rozwiazuje problem, ale oczywiscie nie jest to regula.

passa
13-09-2013, 14:30
Czy mogę w takim razie zgłosić się jeszcze raz z tym zapytaniem za jakiś tydzień? Wtedy dokończę stronkę i wrzucę ją na serwer. Byłoby super, jakbyś mi pomógł znaleźć to konkretne miejsce.

AoW
13-09-2013, 14:32
Z mojej stron nie ma problemu, smiało pisz.

passa
13-09-2013, 14:46
Dziękuję. W takim razie zgłoszę się za tydzień (może troszkę później, bo stronka posiada wiele treści).

I bardzo proszę administratorów forum o pozostawienie tematu, jeśli to nie jest problemem.

passa
02-12-2013, 09:16
Witam ponownie :)

Odświeżam temat. Miałam zgłosić się po kilku dniach, a zeszło kilka tygodni. Problem wciąż ten sam. Tu jest strona www.silat-sigepi.de

Chciałabym, aby menu znalazło się po lewej stronie, a zmiana języków po prawej, na wysokości menu. Po wczorajszym kilkugodzinnym wertowaniu css powychodziły mi rzeczy tak abstrakcyjne, że się wystraszyłam i chyba wolę się spytać lepszych ode mnie.

Bardzo proszę o podpowiedzi :)

I dziekuję bardzo adminom za zachowanie tematu.

AoW
02-12-2013, 09:30
Witam,

zmien css:


header .row1 .row1col2 {
float: left;
}

oraz


#header .row0 {
height: 0;
margin: 0;
padding: 5px 0 0;
text-align: right;
}

passa
02-12-2013, 09:38
Dziekuję za błyskawiczną odpowiedź. Teraz widzę, że ja przeglądam inne css, niż to, które można znaleźć w kodzie źródłowym. Ja zaglądałam do css header z templatki, a muszę chyba znaleźć jeszcze jakieś inne, gdzie będę mogła to zmienić...

AoW
02-12-2013, 09:44
Faktycznie CSS w tej templatce jest tak robiony, że nie ma go w zewnętrznym pliku, tylko jest w headerze includowany.

Sprawdź, czy w headerze nie masz jakiegoś includa do pliku css.

passa
02-12-2013, 09:55
Dziękuję za podpowiedź, teraz to wiele wyjaśnia, dlaczego moje "kombinowanie" poszło na marne. Napisałam właśnie do działu obsługi klienta od szablonu. Bo już sama dalej tego niestety nie przejdę...
Kody od Ciebie zapisuję i dopiszę wszystko, jak tylko się dowiem, gdzie jest ten css z kody źródłowego.

Jeszcze raz dziękuję!