[CSS/HTML] Menu poziome i submenu pod nim


(Drozdkonrad) #1

Cześć, mam pytanie:

Jak zrobić mniej więcej takie menu jak na tej stronie:

http://www.scigacz.pl/

Tak, żeby pod menu, pokazywały się poziomo submenu


(R@z0r) #2

Wszystko tutaj: link


(Drozdkonrad) #3

A przy okazji chciałbym zapytać jeszcze czy robiąc menu, każdą opcję lepiej jest wstawić jako obrazek ze stałym tekstem(czyli tło i tekst w jednym) +hiperłącze, czy wstawić samo tło i na nim coś napisać?

Mam nadzieję, że mnie zrozumieliście ;p

I jak ustawić stronę w centrum ekranu, bo trzyma się lewej strony przeglądarki :confused:


(Drobok) #4

Jak zależy ci na wadze strony to obrazki bym olał. Ale wiadomo efektów takich nie uzyskasz w starszych przeglądarkach. IMO lepiej wrzucić więcej grafik, tło + wszystkie teksty (poczytaj o CSS Sprites)

A co do strony wycentrowanej, to kontener mający jakąś zdefiniowaną szerokość musi mieć margin: 0 auto;


(Drozdkonrad) #5

(manieKMP) #6

Przykład do pobrania. Chyba nie będziesz mieć problemu z "wmontowaniem" i ewentualną przeróbką pod wygląd swojej strony.


(Drozdkonrad) #7

Ok, zamontowałem, wszystkie jest pięknie, ale żeby nie otwierać nowych wątków zapytam tak:

czym się różni w css definicja:

.container {bla bla bla}

od

container { bla bla bla}

i czym się różni

od
?

I jeszcze pytanie, czy mogę tego użyć w HTML/CSS? I jak?

http://workshop.rs/2010/05/coin-slider-4-wordpress/


(ziggurad) #8

(Drozdkonrad) #9

Czyli lepiej jest używać odwołania po klasie?

I jeszcze pytanie, czy mogę tego użyć w HTML/CSS? I jak?

http://workshop.rs/2010/05/coin-slider-4-wordpress/


(B.Andy) #10

Nie ma że lepiej :slight_smile: Jedno służy do czegoś innego i drugie do innej rzeczy. Identyfikatory do unikalnych obiektów na stronie, np. stopka - będzie tylko jedna, natomiast pozycji menu może być wiele i wtedy używamy klasy.

Ten moduł do Wordpressa nie byłby raczej łatwy do implementacji na zwykłej stronie CSS/HTML, choć oczywiście możliwe.


(Drozdkonrad) #11

A jak znaleźć coś podobnego na CSS/HTML? Chodzi mi o to aby wyświetlały się obrazki a obok wiadomości..

Nawet nie wiem pod jakimi hasłami szukać :confused:


(B.Andy) #12

Coś takiego?

http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/

(Drozdkonrad) #13

coś takiego jak tutaj w "Polecamy": http://www.scigacz.pl/

żeby od razu było widać wszystkie newsy


(manieKMP) #14

Chodzi o hasła związane ze slider'em, "jquery slider", "content slider" itp. (przykład).


(Drozdkonrad) #15

wszystko wstawiłem, ale nadal coś jest nie tak. Tak to wszystko napisałem, że dziwnie się układa, czy ktoś mógłby na to zerknąć i powytykać mi kupę błędów?

https://www.virustotal.com/file/95739689302fa956b559f864847ff3b871431a29f0b99b4dafd6a39112ab0b95/analysis/1349714272/

http://www.sendspace.pl/file/01e531141b766980d13fddc


(manieKMP) #16

Nie chce mi się niczego wytykać (poprawka).


(Drozdkonrad) #17

No ok, dzięki..

Jutro sprawdzę jakie są różnice, ale to ze menu i zawartość wystawała to było zamierzone ;p


(manieKMP) #18

No wiesz, nie "pochwaliłeś" się o co konkretnie chodziło i można było wywnioskować, że wystające rzeczy, też są tym dziwnym układaniem się :wink:

Do podanej wcześniej poprawki, poprawka (powrót wystających):

-style.css

html, body {

 font: 10px normal Verdana, Arial, Helvetica, sans-serif;

 background-color: #1f1f1f;

 margin: 0px auto;

 padding: 0px;

 background-position: center;

 text-align: center;

 color:#ffffff;

}


p {color:#ffffff; font-size:10px; font-weight:bold; font-family:Tahoma;}

h1 {font-size:14px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding-left: 20px; text-align: left;}

#header {width: 950px; margin: 0 auto; padding: 1px;}

#wrapper {width: 950px; height: 600px; margin: 0 auto; background-image:url(img/footter1.jpg); background-repeat:repeat-y;}

.left {float: left; width: 320px; padding-top: 16px; margin-left: -10px;}

.right {float: right; width: 650px; padding-top: 26px; margin-right: -10px;}

.artykul {border:3px solid #303030; background-color: #fff;}

.artykul d{color: black; font-size:12px; font-weight:normal; font-family:Tahoma;}


/* stopka */

#footter {

	clear: both;

	width: 980px;

	margin: 0 auto;

	background-image:url(img/footter2.jpg);

	background-repeat:repeat-y;

	background-position: bottom;

	text-align: center;

	padding-top:1px;

	padding-bottom:1px;

}

-menu.css

ul#topnav {

	margin: 0 0 0 -10px;

	padding: 0;

	float: left;

	width: 970px;

	list-style: none;

	position: relative;

	font-size: 1.2em;

	background: url(img/topnav_stretch.gif) repeat-x;

}

ul#topnav li {

	float: left;

	margin: 0; padding: 0;

	border-right: 1px solid #555;

}

ul#topnav li a {

	padding: 10px 15px;

	display: block;

	color: #f0f0f0;

	text-decoration: none;

}

ul#topnav li:hover { background: #1376c9 url(img/topnav_active.gif) repeat-x; }

ul#topnav li span {

	float: left;

	padding: 4px 0;

	position: absolute;

	left: 0; top:35px;

	display: none;

	width: 970px;

	background: #1376c9;

	color: #fff;

	-moz-border-radius-bottomright: 5px;

	-khtml-border-radius-bottomright: 5px;

	-webkit-border-bottom-right-radius: 5px;

	-moz-border-radius-bottomleft: 5px;

	-khtml-border-radius-bottomleft: 5px;

	-webkit-border-bottom-left-radius: 5px;

}

ul#topnav li:hover span { display: block; }

ul#topnav li span a { display: inline; }

ul#topnav li span a:hover {text-decoration: underline;}

(Drozdkonrad) #19

Dziękuję za pomoc, mam kolejne pytanie ;p

Mianowicie zrobiłem sobie news box :wink: i nie wiem jak to zrobić, żeby klikając na któryś z prostokątów (nie na tekst) przenosiło na pożądaną stronę. Coś ala menu.

CSS

.newsitem {

    background-color: #484848;

    border:3px solid #303030; 

    border-bottom: 0;

    width: 250px;

    padding: 10px 40px 10px 20px;

    font: normal 10px/1.5em Arial Verdana, sans-serif;

    color: #000;

}

.newsitem:hover { background: #1376c9 url(img/topnav_active.gif) repeat-x; }

/* Tytuł*/

.newsitem h3 {

    background: url("../images/icon_news.gif") no-repeat 0 50%;

    margin: 0;

    position: relative;

    padding-left: 0px;

    color: #fff;

    font-weight: normal;

}

/* Data*/

.newsitem h3 span {

    color: #818181;

    position: absolute;

    top: 0;

    right: 0;

}

/* Treść*/

.newsitem p {

    padding-left: 20px;

    }

HTML

News Headline 1|30.10.05

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec orci. Suspendisse potenti.

News Headline 2|30.10.05

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec orci. Suspendisse potenti.

News Headline 3|30.10.05

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec orci. Suspendisse potenti.

News Headline 4|30.10.05

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec orci. Suspendisse potenti.

News Headline 5|30.10.05

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec orci. Suspendisse potenti.
[/code]


(manieKMP) #20

A pozamieniaj te div'y na odnośniki:

News Headline 3|30.10.05

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec orci. Suspendisse potenti. [/code] Do css'a (np. do style.css) dodaj jeszcze:
[code]a.newsitem {display:block; text-decoration: none;}

i styknie :wink: