Paralelni boxevi i menu

Web dizajn i grafika
1

Pozdrav, imam jedno pitanje, kako se napravi u html odnosno css da mi dva box-a budu paralelna, imam jedan div koji sam nazvo content_box i sad bi htio napravit da mi jedan box bude glavni i da ide float left a da float right bude jedan odvojen box koji je paralelno sa ovim, u njemu bi pisali neki kao bitni podaci, pa me zanima kako se moze napravit da to bude paralelno?, tipa kako je recimo na portalima sa vijestima, ili na stranicama di je sa desne stranice kontakt i slicno…

I jos jedno pitanje, ima negdje di se mogu skinut gotove slike za menu? Neda mi se to radit a mozda bi negdje nasao neku super sliku za menu…i kako se moze napravit na istom tom menu ako recimo imam tu jednu sliku i isla bi repeat-x, i da napravim da mi svaki od ovih tekstova sta je na html-u bude odredeno pozicioniran na toj slici, ako me kuzite sta ocu rec, znaci tekst da poravnam, tipa O nama da bude nasred te slike od menu-a…

Hvala :slight_smile:

2

kao što si reko float ljevo desno. no sam ti moraju bit iste visine ak si na to mislio, imaš ponašanje u css3 koje je bolje od floata sam ga podržavaju jedino mozzila i chrome.

3

Ma sad sam gledo i najslicnije sam vidio align u samom html-u di se stavlja div, pa na taj nacin, al opet koliko vidim mi jedno ispod drugog…meni treba paralelno…

4

u css za svaki box postavi

display:inline;

naravno contetn_box ti mora biti širi od zbroja ova dva boxa koja želiš postaviti paralelno

5

svaku meni sliku stavi u zaseban div i unutar njega napravi div u kojem će ti biti tekst menija (npr. Kontakt) te njega poravnaj centrirano.

evo ti na brzinu jedan primjer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#menu{
	background-image:url('http://mark-guerrein.com/samples/Payment%20Arranagments/images/menu-background%20for%20collections.gif');
	width:200px;
	height:100px;}
#naziv{
	text-align:center;
	padding:50px;}
</style>

</head>

<body>

<div id="menu">
		<div id="naziv">O nama</div>
</div><!--kraj menu-->
</body>
</html>
6

Aha, hvala puno, ovo prvo je pomoglo, a vezano za ovo drugo, znaci onda cu i za te divove morat koristit inline koliko vidim?

Jos mi samo treba neka stranica di mogu nac neku korisnu sliku za menu, ako neko ima, ako ne, budem onda napravio sam u photoshopu kad vremena nadem :slight_smile:

7

http://www.smashingapps.com/2011/05/26/70-free-psd-web-ui-elements-for-designers.html

8

Hvala puno, sigurno ce pomoc makar sam si napravio u ps-u sta mi je trebalo, al dobro dode ovo :slight_smile:

Imam jos jedan problem, napravim taj box i sad svaki box onaj manji sam stavio sliku na pocetku, top left i da ide repeat-x, napravio sam ju da je sirine 1px, onak klasika i dobro sad to izgleda al je problem sta ocu stavit u svaki taj box gore naslov na pozadinu od toga, i posto koristim h4 automatski mi ode new line i ne zeli mi ga poravnat da mi bude skroz gore lijevo, padding mi je nula ova prva vrijednost i sve sam gledo al nikako da to sredim, kako da to rijesim?

9

Jos jedno pitanje, nisam isprobavao jos al da odma znam, kak se napravi da stavim picture with paragraph, znaci da sliku stavim lijevo a tekst desno oko slike sa recimo nekim borderom…a da se ta slika kad se klikne da se otvori kako inace bude na stranicama, ono tipa da se slika otvori a okolo se zatamni, a slika bude na sredini, onako kako je na vecini stranica.

10

ovo što se tiče h4 nerazumijem što si želio reći, a što se tiče toga da ti se slika poveća kad klikneš na nju a ostalo se zatamni to ti je jQuery evo ti pa implementiraj
http://fancybox.net/howto

11

Vezano za h4, pobjegne mi dole malo naslov, nece mi od gore lijevo pocet…a padding mi je nula…


http://img571.imageshack.us/img571/1271/61299706.png

12

A koliki ti je line height i margin, a uostalom užasno teško je ovako bilo što raditi i reći. LIjepo napraviš jedan folder ili poddomenu na stranici tamo uploadaš sve što imaš i onda nam daš ovdje link i kažeš tvoj problem. Vjeruj mi da će ti puno više ljudi pomoći nego ovako, bez koda bez slike bez ičega, ja prvi.

13

Uspio sam sredit, hvala :slight_smile: