Archief - CSS: Float probleem..

demon326 · 1 jan 2008

Hallo iedereen, ik wil wat aanpassingen aan de lay out van onze site doen tot nu toe heb ik niet echt problemen gehad,maar nu is de ellende begonnen,ik heb 3 nieuwe divs gemaakt en deze ook in de css gestyled maar toch gaat er iets mis

de html:

HTML:

 <div class="recent-nodes">
	 <!-- recent nodes(reviews,gigs,interviews) -->
      <?php print $recent_nodes ?>
	  </div>

zoals jullie zien wordt de content dmv php erin geladen dus geef ik hier onder de html code als output:

HTML:

<div class="recent-nodes">
	 <!-- recent nodes(reviews,gigs,interviews) -->
      <div id="block-review-0" class="block block-review">

  <h2>Recent reviews</h2>

  <div class="content"><div class="item-list"><ul><li><a href="/review/alestorm-captains-morgans-revenge">Alestorm - Captains Morgan's Revenge</a></li><li><a href="/willows-whisper-pages-turn-ep">Willow's Whisper - Pages Turn (EP)</a></li><li><a href="/review-finntroll-en-sodom">Review Finntroll en Sodom</a></li><li><a href="/hammerfall-krokus-poodles">Hammerfall + Krokus + The Poodles</a></li><li><a href="/krypteria-bloodangels-cry">Krypteria - Bloodangel's Cry</a></li><li><a href="/amon-amarth-with-oden-our-side">Amon Amarth - With Oden on our side</a></li><li><a href="/lacuna-coil-karmacode">Lacuna Coil - Karmacode</a></li><li><a href="/shadowlord-batavorum">Shadowlord - Batavorum</a></li><li><a href="/rhapsody-of-fire-triumph-of-agony">Rhapsody Of Fire - Triumph Of Agony</a></li><li><a href="/opeth-ghost-reveries">Opeth - Ghost Reveries</a></li></ul></div></div>

</div>
<div id="block-views-latest_reports" class="block block-views">


  <div class="content"><div class="view view-latest-reports"><div class="view-content view-content-latest-reports"><div class="item-list"><ul><li><div class="view-item view-item-latest-reports"><div class="view-field view-data-node-title"><a href="/concert-review-sanctuary-new-dawn">Concert Review, Sanctuary + A new Dawn</a></div></div>
</li><li><div class="view-item view-item-latest-reports"><div class="view-field view-data-node-title"><a href="/graspop-verslag-dag-3">graspop verslag dag 3</a></div></div>
</li></ul></div></div></div>
</div>
</div>
<div class="block-region">recent nodes</div>	  </div>

de css voor de divs:

Code:

/* container/regio div for the recet reviews,gigs,interviews blocks */
#recent-nodes{
/* i dont know if we need all this stuff below but i will let it stay.. */
background: url('images/bgmiddle.png');
border: 2px solid #b6b6b6;
color: #cccccc;
font: 12px Arial;
width:500px;
margin:0px;
padding:20px;
float:left;
}
/*start off the recent gig reports styling */
/* recent gig view block */
#block-views-latest_reports{
background: url('images/bgmiddle.png');
border: 2px solid #b6b6b6;
color: #cccccc;
font: 12px Arial;
width:188x;
margin:0px;
/*padding:20px;*//* i removed the padding cause i think that fucks up the site */
float:left;
}

/* link active  reports block*/
#block-views-latest_reports a{
text-decoration: none;
color: #cccccc;
}
/* gig reports link color hover */
#block-views-latest_reports a:hover{
color: #a2df66;
}
/*end of the latest gig reports block */
/*start of the recent reviews block syling */
/*recent reviews block */
#block-review-0{
background: url('images/bgmiddle.png');
border: 2px solid #b6b6b6;
color: #cccccc;
font: 12px Arial;
width:188x;
margin:0px;
/*padding:20px;*//* i removed the padding cause i think that fucks up the site */
float:left;
}
/* link activ reviews block */
#block-review-0 a{
text-decoration: none;
color: #cccccc;
}
/* link hover reviews block */
#block-review-0 a:hover{
color: #a2df66;
}
/*end off reviews block styling */

nu wat is het probleem,zie de screenshot:
dit is de versie die "slecht" is: http://ashladan.be/files/prob.jpg

dit is de goede:
http://ashladan.be/files/goede.jpg
waar daar de google ads staan horen die blockjes op de andere screen goed te komen zonder de lay out verder stuk te maken

ps: eenmaal het werkt worden de blockjes even hoog gemaakt

n00bslayer · 2 jan 2008

Het eerste wat ik zie rechtsonderaan bij prob.jpg is "1 error", dus kan je eventueel eens kijken als je geen fouten in je code hebt staan?

Je sluit jouw <div class="recent-nodes"> tag tot 2x toe te vroeg af (waardoor je hem dus in totaal 3x wil afsluiten).

In principe is de recent-nodes al afgesloten vlak voor je <div id="block-views-latest_reports" class="block block-views"> aanvangt, waarbij je validator-plugin uiteindelijk bij de 3e keer geen div meer vond om af te sluiten.
Ofwel heb je een foutje gemaakt bij het copy/pasten, kan ook

Zorg er bij het opmaken van een document altijd voor dat je html valideert, alvorens met je css te beginnen

.

Een publiek toegankelijk online voorbeeldje zou wel handig zijn

demon326 · 2 jan 2008

n00bslayer zei:
Het eerste wat ik zie rechtsonderaan bij prob.jpg is "1 error", dus kan je eventueel eens kijken als je geen fouten in je code hebt staan?

Je sluit jouw <div class="recent-nodes"> tag tot 2x toe te vroeg af (waardoor je hem dus in totaal 3x wil afsluiten).

In principe is de recent-nodes al afgesloten vlak voor je <div id="block-views-latest_reports" class="block block-views"> aanvangt, waarbij je validator-plugin uiteindelijk bij de 3e keer geen div meer vond om af te sluiten.
Ofwel heb je een foutje gemaakt bij het copy/pasten, kan ook

Zorg er bij het opmaken van een document altijd voor dat je html valideert, alvorens met je css te beginnen .

Een publiek toegankelijk online voorbeeldje zou wel handig zijn

al mijn dingen zijn zo opgemaakt.. hoor.. zoals eerder gezegt de "recent-nodes" is een container div daarin word de echte inhoud dmv php geprint..

hier een test account met de "defecte" theme aan:
username:demon327
pass: 123456

maar alles wordt zo dmv php geprint dus ik heb dit niet in de hand:

Code:

<div d="block-views-latest_reports" class="block block-views">

maar die block block-views is een algemeene class die ik niet moet stylen gezien ik dan alle blocken style die met de views module gemaakt worden...

heel mijn template file code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language; ?>" xml:lang="<?php print $language; ?>">
<head>

   <!-- pagina titel word hier geprint -->
  <title><?php print $head_title; ?></title>
  <!-- hier worden de overige dingen getekend zoals metadata enz -->
  <?php print $head ?>
   <!--print de css  scripts-->
  <?php print $styles ?> 
   <!-- print alle JS scripts-->
  <?php print $scripts ?>
  <!-- IE 5.5,6.x png fix -->
<!--[if IE 6]>
<style type="text/css" media="all">@import "/themes/ashladan/ie.css";</style>
<![endif]-->

<!-- zoeken via de browser plug ins -->
<!--[if IE 7>
  <link rel="search" type="application/opensearchdescription+xml"
  title="ashladan.be(IE)" href="files/IE.xml" />
  <![endif]-->
   <link rel="search" type="application/opensearchdescription+xml"
  title="ashladan.be" href="files/mozila.xml" />
</head>

<body>

	<div id="container">

		<div id="header">

			<h1>Ashladan.be</h1>
     
		</div>
		

		<ul id="menu">
		
			<li class="home"><a href="/">Home</a></li>
			<li class="forum"><a href="/forum">Forum</a></li>
			<li class="gallery"><a href="/gallery">Gallery</a></li>
			<li class="faq"><a href="/faq">Faq</a></li>
			<li class="links"><a href="/links">Links</a></li>
		
		</ul>
		<center><div id="ads"><script type="text/javascript"><!--
google_ad_client = "pub-4160916056570264";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al_s";
google_ad_channel = "";
google_color_border = "000000";
google_color_bg = "000000";
google_color_link = "FFFFFF";
google_color_text = "CCCCCC";
google_color_url = "999999";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div></center>
     <div class="recent-nodes">
	 <!-- recent nodes(reviews,gigs,interviews) -->
      <?php print $recent_nodes ?>
	  </div>
		
		<div id="menu_left">
            
			<?php print $sidebar_left; ?>
		</div>

		<div id="content">

		      <?php print $breadcrumb ?>  
        		<h1 class="title"><?php print $title ?></h1>
        		<div class="tabs"><?php print $tabs ?></div>
        		<div id="help"><?php print $help ?></div>
        		<?php print $messages ?>
				<?php print $admin_message ?>
        		<?php print $content ?>
				<?php print $feed_icons ?>

		</div>

		<div id="menu_right">
           
			<?php print $sidebar_right; ?>
		</div>

		<!--<div id="footer"><//?php print $voet ?></div> -->
		<div id="footer"><script type="text/javascript">
		<!--
		d=document;
		pag="";col="";scr=0;b=navigator.appName;
		scr=screen.width+"*"+screen.height;
		ref=parent==self ? escape(window.document.referrer) : escape(top.document.referrer);
		pag=escape(d.URL);
		if (b != "Netscape") {col=screen.colorDepth}
		else {col=screen.pixelDepth}
		if(col=="undefined"){col="";}
		d.write("<a href=http://www.belstat.be/viewstat.asp?UserID=t071574\&lang=nl target=_blank><img border=0 src=\"http://www.belstat.be/regstat.aspx?");
		d.write("UserID=t071574&BColor=blue&refer=" + ref + "&pag=" + pag + "&b=" + b + "&col=" + col + "&scr=" + scr);
		d.write("\" align=center width=16 height=16 alt=\"Monitored by BelStat - Your Site Counts\"><\/a>");
		// -->
</script>
<!-- End of belstat.be Counter -->
 &copy;Ashladan 2006-2007 - <a href="privacy">Privacybeleid</a></div> 
	</div>
<?php
print $closure
?>
</body>
</html>

ik hoop dat ik hier mee verder geholpen kan worden

demon326 · 3 jan 2008

Ik heb het eindenlijk opgelost,ik moest de "recent-nodes" div net boven mijn content window..

maar nu heb ik een nieuw probleem in IE 7.. mijn H2 images worden afgekapt om een of andere redennen en ik vind niet waar...

ad:

//edit: in IE6 is alles fucked up

n00bslayer · 4 jan 2008

De breedte van je H2 zelf is niet toereikend, iets wat normaal gezien met display:block moet opgelost geraken. Probeer eens een width van 100% mee te geven?

En voor IE6 zal je je heil waarschijnlijk moeten zoeken bij het box-border model, het komt erop neer dat je met behulp van een nieuw css bestand (importeren in je pagina kan je bvb doen met  , opdat alleen Internet Explorer 6 of lager dit stijlbestand inleest) je de fucked up elementen een nieuwe breedte meegeeft, dus breedte van je element+padding+border. Op die manier zal IE6 je elementen de voor IE6 'correcte' breedte meegeven.

demon326 · 4 jan 2008

n00bslayer zei:
De breedte van je H2 zelf is niet toereikend, iets wat normaal gezien met display:block moet opgelost geraken. Probeer eens een width van 100% mee te geven?

En voor IE6 zal je je heil waarschijnlijk moeten zoeken bij het box-border model, het komt erop neer dat je met behulp van een nieuw css bestand (importeren in je pagina kan je bvb doen met  , opdat alleen Internet Explorer 6 of lager dit stijlbestand inleest) je de fucked up elementen een nieuwe breedte meegeeft, dus breedte van je element+padding+border. Op die manier zal IE6 je elementen de voor IE6 'correcte' breedte meegeven.

thx voor de info

,ga het eens van dees dagen testen

Archief - CSS: Float probleem..

demon326

Legacy Member

n00bslayer

Legacy Member

demon326

Legacy Member

demon326

Legacy Member

n00bslayer

Legacy Member

demon326

Legacy Member