Skocz do zawartości

Pozycjonowanie divów


man_of_the_oak

Recommended Posts

Witam forumowiczów!

Mam problem z teoretycznie prostą sprawą - ułożenie 2 divów obok siebie. Próbowałem ustawiać oba na float:left, wrzucając je do jednego containera i nadając mu clear:both - bez skutku. Może już po prostu przestaję kontaktować po 2 dniach siedzenia nad tym projektem >.<" Proszę więc o pomoc tutaj zgromadzonych.

Przedstawię w wersji graficznej jak chciałbym, aby to wyglądało:

http://i30.tinypic.com/32zjqbp.png

niestety, póki co jedyne co udało mi się osiągnąć wygląda tak:

http://i28.tinypic.com/160aceh.png

W pierwszym z divów będzie znajdować się więcej treści niż w drugim, więc dodałem kolor dla tła containera.

Oto kod strony:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Malchus - Oficjalna strona zespołu&lt;/title&gt;
&lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
&lt;script type="text/javascript"&gt;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i&lt;a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&amp;&amp;i&lt;a.length&amp;&amp;(x=a[i])&amp;&amp;x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))&gt;0&amp;&amp;parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&amp;&amp;d.all) x=d.all[n]; for (i=0;!x&amp;&amp;i&lt;d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&amp;&amp;d.layers&amp;&amp;i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x &amp;&amp; d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i&lt;(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="MM_preloadImages('img/img_glow_18.png','img/img_glow_19.png','img/img_glow_20.png','img/img_glow_21.png','img/img_glow_22.png','img/img_glow_23.png','img/img_glow_24.png')"&gt;

&lt;div id="container"&gt;

    &lt;div id="main"&gt;
&lt;img src="img/img_02.png" width="51" height="251" /&gt;&lt;img src="img/img_03.png" width="32" height="251" /&gt;&lt;img src="img/img_04.png" width="53" height="251" /&gt;&lt;img src="img/img_05.png" width="71" height="251" /&gt;&lt;img src="img/img_06.png" width="88" height="251" /&gt;&lt;img src="img/img_07.png" width="73" height="251" /&gt;&lt;img src="img/img_08.png" width="57" height="251" /&gt;&lt;img src="img/img_09.png" width="61" height="251" /&gt;&lt;img src="img/img_10.png" width="73" height="251" /&gt;&lt;img src="img/img_11.png" width="76" height="251" /&gt;&lt;img src="img/img_12.png" width="66" height="251" /&gt;&lt;img src="img/img_13.png" width="63" height="251" /&gt;&lt;img src="img/img_14.png" width="48" height="251" /&gt;&lt;img src="img/img_15.png" width="38" height="251" /&gt;&lt;img src="img/img_17.png" width="83" height="49" /&gt;&lt;a href="nowosci.php"&gt;&lt;img src="img/img_18.png" alt="Nowości" name="nowosci" width="104" height="49" border="0" id="nowosci" onmouseover="MM_swapImage('nowosci','','img/img_glow_18.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;&lt;a href="zespol.php"&gt;&lt;img src="img/img_19.png" alt="Zespół" name="zespol" width="86" height="49" border="0" id="zespol" onmouseover="MM_swapImage('zespol','','img/img_glow_19.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;&lt;a href="koncerty.php"&gt;&lt;img src="img/img_20.png" alt="Koncerty" name="koncerty" width="95" height="49" border="0" id="koncerty" onmouseover="MM_swapImage('koncerty','','img/img_glow_20.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;&lt;a href="media.php"&gt;&lt;img src="img/img_21.png" alt="Media" name="media" width="99" height="49" border="0" id="media" onmouseover="MM_swapImage('media','','img/img_glow_21.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;&lt;a href="linki.php"&gt;&lt;img src="img/img_22.png" alt="Linki" name="linki" width="70" height="49" border="0" id="linki" onmouseover="MM_swapImage('linki','','img/img_glow_22.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;&lt;a href="ksiega_gosci.php"&gt;&lt;img src="img/img_23.png" alt="Księga gości" name="ksiega_gosci" width="137" height="49" border="0" id="ksiega_gosci" onmouseover="MM_swapImage('ksiega_gosci','','img/img_glow_23.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;&lt;a href="kontakt.php"&gt;&lt;img src="img/img_24.png" alt="Kontakt" name="kontakt" width="103" height="49" border="0" id="kontakt" onmouseover="MM_swapImage('kontakt','','img/img_glow_24.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;&lt;img src="img/img_25.png" width="73" height="49" /&gt;&lt;/div&gt;

   &lt;div id="promo"&gt; &lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_26.png" width="51" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_27.png" width="58" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_28.png" width="63" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_29.png" width="44" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_30.png" width="53" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_31.png" width="50" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_32.png" width="61" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_33.png" width="69" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_34.png" width="64" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_35.png" width="60" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_36.png" width="59" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_37.png" width="69" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_38.png" width="55" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_39.png" width="56" height="150" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"&gt;&lt;img src="img/img_40.png" width="38" height="150" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;

  &lt;div id="tresc_full"&gt;

    &lt;div id="tresc_round"&gt;
    &lt;img src="img/img_41.png" width="51" height="21" /&gt;&lt;img src="img/img_42.png" width="761" height="21" /&gt;&lt;img src="img/img_43.png" width="38" height="21" /&gt;&lt;/div&gt;

	&lt;div id="container_2"&gt;
	&lt;div id="tresc"&gt;

    &lt;div id="title-img"&gt;&lt;img src="img/nowosci_title.png" width="92" height="35" alt="Nowości" /&gt;&lt;/div&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    bla bla?
hmm... quite possible &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
fdfdfdfdfdfdfd~~~~~~~~~~~~~~~~~~~~~~~~~
    &lt;/div&gt;
    &lt;div id="sidebar"&gt;
gasgsjafs
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="tresc_round"&gt;
    &lt;img src="img/img_46.png" width="35" height="21" /&gt;&lt;img src="img/img_47.png" width="768" height="21" /&gt;&lt;img src="img/img_48.png" width="47" height="21" /&gt;&lt;/div&gt;

  &lt;/div&gt;

   &lt;div id="footer"&gt;&lt;br /&gt;&lt;img src="img/img_51.png" width="13" height="28" /&gt;&lt;a href="http://www.myspace.com/malchus777" target="_blank"&gt;&lt;img src="img/img_52.png" alt="Myspace" width="108" height="28" border="0" /&gt;&lt;/a&gt;&lt;img src="img/img_53.png" width="40" height="28" /&gt;&lt;a href="http://www.youtube.com/radii777" target="_blank"&gt;&lt;img src="img/img_54.png" alt="YouTube" width="75" height="28" border="0" /&gt;&lt;/a&gt;&lt;img src="img/img_55.png" width="47" height="28" /&gt;&lt;a href="http://nk.pl/profile/11994686" target="_blank"&gt;&lt;img src="img/img_56.png" alt="nk.pl" width="40" height="28" border="0" /&gt;&lt;/a&gt;&lt;img src="img/img_57.png" width="13" height="28" /&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

oraz arkusz css:

body,td,th {
	font-size: 12px;
	color: #999;
	font-family: Verdana, Tahoma, Arial, sans-serif;
}
body {
	background-color: #000;
}
#container {
	margin:0px auto;
	padding:0px;
	width: 850px;
}
#main {
	width: 850px;
	height: 300px;
	margin:0px auto;
	padding:0px;
}
#promo {
	position:static;
	top: 0px;
}
#tresc_round {
	position:static;
	top: 0px;
	clear:both;
}
#tresc {
	width: 600px;
	background-color:#0b0b0b;
	padding: 0px 10px;
	float:left;
}
#tresc_full {
	clear:both;
}

#title-img {
	width: 600px;
	text-align: left;
	border-bottom: 2px dotted;
	border-bottom-color: #999;
}
#footer {
	margin:0px auto;
	padding:0px;
	width: 336px;
}
#container_2 {
	width: 850px;
	background-color:#0b0b0b;
}
#sidebar {
	width: 230px;
	float:left;
}

Z góry dziękuję za pomoc!

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...