Div width 100% ne valja kad se stranica zoomira

Pozdrav,

može li mi neko pomoći oko ovoga: na ovoj stranici pozadina od izbornika se zezne kada se koristi zoom (skupa sa slikama) u operi ili firefoxu (ili kada se refresha dok je veličina browsera premala za prikaz cijele stranice pa se skrola udesno, kao na screenshotu).

http://img828.imageshack.us/img828/104/calidobug.png

htio bih, naravno, da ostane kao na gornjoj slici, bez obzira na zoom i veličinu prozora.

Ako hoćeš da iskreno razgovaramo, onda zato što si zakomplicirao kod do übera.

Ako hoćeš na brzinu riješiti problem, makni width sa width_majstor i trebalo bi sjesti na svoje.

Ovo:
[HTML]

 
  <div class="a_header"><a class="menu" href="onama.html">o nama</a></div>
  <div class="a_header_selected"><a class="menu" href="index.html">home</a></div>
</div>
  <div class="frames"></div>
    <div class="content">
    	<div class="content_padding_p"></div>
        <h1>Home</h1>
        <p>Grupa CALIDO se nakon vrlo uspješnog albuma prvijenca predstavlja novim singlom, pjesmom "ZOVEM TE". U svom jedinstvenom akustičnom stilu,
          grupa CALIDO donosi pjesmu poletnog ritma i zaraznog refrena.
        </p>
		<p>Uz pokretnu i svježu glazbenu pratnju, te retrospektivan lirski tekst, pjesma "ZOVEM TE" svojom iskrenošću osvaja na prvo slušanje.
        </p>

		  Za grupu ova pjesma predstavlja novu stepenicu te jasan glazbeni napredak.
	    <p>
            <object width="450" height="362"><param name="movie" value="http://www.youtube.com/v/ifmpeVOjPbo?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ifmpeVOjPbo?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="362"></embed></object>
        </p>

        <p>Posjetite nas na:</p>
        <ul>
          <li><a href="http://www.myspace.com/calidomusic">Myspace stranicama</a> ili</li>

          <li><a href="http://www.facebook.com/pages/Calido/25196182785">Facebooku</a></li>
        </ul>
      <div class="content_padding"></div>
    </div>
</div>
<div class="footer_author">
    Web design by Jerko Steiner
</div>
[/HTML]

si mogao zamijeniti ovim:
[HTML]

Calido

Home

Grupa CALIDO se nakon vrlo uspješnog albuma prvijenca predstavlja novim singlom, pjesmom "ZOVEM TE". U svom jedinstvenom akustičnom stilu, grupa CALIDO donosi pjesmu poletnog ritma i zaraznog refrena.

Uz pokretnu i svježu glazbenu pratnju, te retrospektivan lirski tekst, pjesma "ZOVEM TE" svojom iskrenošću osvaja na prvo slušanje.

Za grupu ova pjesma predstavlja novu stepenicu te jasan glazbeni napredak.

Posjetite nas na:

Web design by Jerko Steiner
[/HTML] Primjetit ćeš da ti se kod smanjio za cijelih 9 linija, što i nije neka količina ako gledaš samo na broj, ali je semnatički ispravnije i lakše za održavanje na ovaj način. Evo za vježbu probaj ovaj kod ubaciti i oblikovati ga css-om. To je izvrstan način na koji ćeš shvatiti CSS, uglavnom to radim na taj način kada nekog podučavam, rezultati su odlični.

Evo ti napravi svoj css i pokaži ga, a ako negdje baš zapneš postaj ovdje pa ćemo riješiti zajedno.

Druga stvar imaš previše malih fragmenata slika koje postavljaš kao background, a možeš ih postaviti kao jednu preko cijele stranice, nema razloga da imaš npr. fcvijwetgornji.png, cvijet donji.png gitara.png itd. Složi to u jednu sliku, transparent i postavi to kao background od .body elementa.

“Preskupo” ti je nabacivati se s toliko elemenata po stranici, a ne potrebno.

Sad da odmah uskočim u riječ onima koji će me napasti, naravno da za ovako malo stranicu to što sam napisao i nije važno, ali upravo ovako male stranice su najnolji početak za stvaranje kvalitetnih navika semantički ispravnog kodiranja, a ne da se nabacuje elementima.

Inače dizajn ti je super.

Hvala na konstruktivnim kritikama. Stvaro sam ga malo pretjerao s divovima…

Dosta sam pojednostavio kod, koristeći smjernice gore, ali čini mi se da se opet ista stvar događa kad se širina browsera smanji:

http://www.inet.hr/~ssteiner/index_proba.html

unutar bodyja je sljedeće:
[HTML]

<div class="content">

        <h1>Home</h1>
        <p>Grupa CALIDO se nakon vrlo uspješnog albuma prvijenca predstavlja novim singlom, pjesmom "ZOVEM TE". U svom jedinstvenom akustičnom stilu,
          grupa CALIDO donosi pjesmu poletnog ritma i zaraznog refrena.
        </p>
		<p>Uz pokretnu i svježu glazbenu pratnju, te retrospektivan lirski tekst, pjesma "ZOVEM TE" svojom iskrenošću osvaja na prvo slušanje.
        </p>
		  Za grupu ova pjesma predstavlja novu stepenicu te jasan glazbeni napredak.
	    <p>
            <object width="450" height="362"><param name="movie" value="http://www.youtube.com/v/ifmpeVOjPbo?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ifmpeVOjPbo?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="362"></embed></object>
        </p>

        <p>Posjetite nas na:</p>
        <ul>
          <li><a href="http://www.myspace.com/calidomusic">Myspace stranicama</a> ili</li>
          <li><a href="http://www.facebook.com/pages/Calido/25196182785">Facebooku</a></li>
        </ul>

</div>

<div class="footer_author">
    Web design by Jerko Steiner
</div>[/HTML]

dio css vezan za gornji html:

/*** MENI ***/

ul.nav {
	background-image:url(../images/top.png);
	background-repeat: repeat-x;
	height: 99px;
	width: auto;
}


li.nav_li {
	list-style-type: none;
	padding-left: 16px;
	padding-right: 16px;
	float: right;
	padding-top: 50px;
	font-size: 1.1em;
	z-order: 100;
}


/*** POZADINA ***/
div.content {
	background-image: url(../images/body_back.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: -50px;
	width: 430px;
	margin-left: auto ;
	margin-right: auto ;

	padding-left: 510px;
	padding-bottom:212px;
	padding-top: 108px;
}

uspio sam riješiti ovaj problem dodavanjem min-widtha.

Moraš si odrediti širinu “kontejnera” u kojem želiš raditi, znači obmotati cijeli layout u jedan glavni element koji će služiti kao kontejner gdje ćeš sve trpati. Probaj staviti u css pravilo npr.

#wrapper {
width: 960px; /* širina omotača u kojem će biti smješten sav sadržaj */
margin: 0 auto; /* ovo je za centriranje stranice u browserima */
}

nakon cijeli sadržaj ubaci u taj element:

[HTML]


	<div class="content">

	        <h1>Home</h1>
	        <p>Grupa CALIDO se nakon vrlo uspješnog albuma prvijenca predstavlja novim singlom, pjesmom "ZOVEM TE". U svom jedinstvenom akustičnom stilu,
	          grupa CALIDO donosi pjesmu poletnog ritma i zaraznog refrena.
	        </p>
			<p>Uz pokretnu i svježu glazbenu pratnju, te retrospektivan lirski tekst, pjesma "ZOVEM TE" svojom iskrenošću osvaja na prvo slušanje.
	        </p>
			<p>Za grupu ova pjesma predstavlja novu stepenicu te jasan glazbeni napredak.</p>
			<p>
		        <object width="450" height="362"><param name="movie" value="http://www.youtube.com/v/ifmpeVOjPbo?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ifmpeVOjPbo?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="362"></embed></object>
	        </p>

	        <p>Posjetite nas na:</p>
	        <ul>
	          <li><a href="http://www.myspace.com/calidomusic">Myspace stranicama</a> ili</li>
	          <li><a href="http://www.facebook.com/pages/Calido/25196182785">Facebooku</a></li>
	        </ul>

  	</div>

	<div class="footer_author">
	    Web design by Jerko Steiner
	</div>
</div>

[/HTML]

I vidjet ćeš što će se dogoditi, naravno širinu tog omotača možeš odrediti koliku god ti želiš, ali nekako se ustalilo 960px zbog grid design patterna u dizajnu općenito koji nije prisutan samo na web-u.

Naravno ovakav pristup ima za potrebu da neke lemente i malo drugačije izrežeš u alatu koji koristiš za dizajn stranica.

Najbolje ti je da porbaš to uraditi i onda probaj sužavati i širiti browser da vidiš kako će reagirati. Ukoliko ima nejasnoća javi se.

Pozdrav


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja