Ga naar inhoud

Afbeelding komt buiten de div..

demon

Door demon
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

demon Enthousiasteling

demon

Geplaatst:
Geplaatst:

Hallo iedereen, ik ben eens aan het spelen met de YUI-tabs, maar ik zit met een lastig probleem, mijn afbeeldingen komen namelijk buiten de div terecht en ik wil dat de div zich rekt indien de afbeelding te groot is voor binnen te div te houden..

mijn html code:

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Build from Markup</title>

<style type="text/css">
/*margin and padding on body element
 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */
body {
margin:0;
padding:0;
}

.afbeelding{
margin:0px 5px 0px 0px;
}


</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>

<!--there is no custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Build from Markup</h1>

<div class="exampleIntro">
<p>This demonstrates how to build a TabView from markup.</p>


</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo" style="width:500px; height:auto;" class="yui-navset">
   <ul class="yui-nav">
         <li class="selected"><a href="#tab1"><em>Recensies</em></a></li>
       <li><a href="#tab2"><em>Interviews</em></a></li>
       <li><a href="#tab3"><em>Reports</em></a></li>
	<li><a href="#tab4"><em>Bands</em></a></li>
   </ul>            
   <div style="height:auto;" class="yui-content">
    <div id="tab1">
<h1 class="title"><?php print $title ?></h1>	 
 <img width="100" height="100" align="left" title="ac/dc" alt="ac/dc" src="http://ashladan.be/files/u1151/Battlelore_-_The_Last_Alliance.jpg"  class="afbeelding"/>
 <p>Dat Tolkien goede boeken schreef wist hij waarschijnlijk wel, maar dat hij jaren na zijn dood nog steeds mensen zou inspireren om zelf te gaan schrijven, of zelfs muziek te gaan maken had hij niet verwacht. Dat er anno 2008 nog bands zijn die in volle overtuiging over midden aarde zingen en zelfs met elven oren het podium beklimmen is echter niets om nog van op te kijken. Vele bands doen dat, zo ook het Finse Battlelore.</p>
<p><img width="100" height="100" align="left" title="ac/dc" alt="ac/dc" src="http://ashladan.be/files/u1165/heimgang.jpg"  class="afbeelding"/>Het Noorse Kampfar zag het eerste levenslicht in 1994 toen zanger Dolk zijn vorige band Mock verliet. Hij wierf Thomas aan als gitarist, uit deze samenwerking ontstond er een demo. Doch duurde het tot 2003 eer Kampfar een optreden aanvaardde, dit bij de komst van bassist Jon en drummer II13.</p><br>
<p><img width="100" height="100" align="left" title="ac/dc" alt="ac/dc" src="http://ashladan.be/files/u1151/Bioscrape_-_Demo_0.jpg"  class="afbeelding"/>Wanneer er op een rustige middag opeens een zwart cd hoesje op de deurmat valt met daarop snoei harde muziek lijkt het bijna op teken van daarboven. Het schijfje wat mijn flauwe dag veranderde in een headbangende middag was van de band Bioscrape. Zo een cadeau verdient dan natuurlijk een review!</p>
</div>



         <div id="tab2"><p>
	  <h1 class="title"><?php print $title ?></h1>
 <p>
 <img width="100" height="100" align="left" title="ac/dc" alt="ac/dc" src="http://www.ashladan.be/files/u1151/Symphonity_-_Voice_From_The_Silence.jpg"  class="afbeelding"/>
Een tijdje terug kon je op Ashladan de review van Voice From The Silence van de band Symphonity lezen. Dit album zou wel eens één van de beste albums van 2008 in het power metal genre kunnen worden. Ashladan sprak met zanger Olaf Hayer en gitaris Libor Krivák over het nieuwe album en de verhalen erachter. </p></div><br>
<img width="100" height="100" align="left" title="ac/dc" alt="ac/dc" src="http://www.ashladan.be/files/u1151/Symphonity_-_Voice_From_The_Silence.jpg"  class="afbeelding"/> Een tijdje terug kon je op Ashladan de review van Voice From The Silence van de band Symphonity lezen. Dit album zou wel eens één van de beste albums van 2008 in het power metal genre kunnen worden. Ashladan sprak met zanger Olaf Hayer en gitaris Libor Krivák over het nieuwe album en de verhalen erachter.
 </div>
       <div id="tab3">
   <h1 class="title"><?php print $title ?></h1>
	<p><?php print $recent_report ?></p></div>
	<div id="tab4">
    <h1 class="title"><?php print $title ?></h1>
	<p>Tab Four Content</p></div>
   </div>
</div>
<script>
(function() {
   var tabView = new YAHOO.widget.TabView('demo');

   YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>

screen met het probje:

http://uploads.screenshot-program.com/upl9249718770.jpg

Link naar reactie
Delen op andere sites
leroy Mentor

leroy

Geplaatst:
Geplaatst:

bij dit stukje broncode hoort ook een CSS te zitten (waar de stijl in staat) zou je die eens hier willen zetten... (dit zijn er 2 zo te zien aan de broncode. fonts-min.css en tabview.css)

(als code tag of even inpakken en uploaden naar de server)

dan kan ik kijken waar het probleem precies ligt.

want ik heb veel websites al aangepast omdat hij meestal loopt te irriteren met DIV-jes. Ik gebruik liever ook geen DIV-jes maar gewoon tabellen.

maar plaats hem even hier op PcH, en ik zal even voor je kijken of ik de fout eruit kan halen.

MVGr,

Leroy

Link naar reactie
Delen op andere sites
demon Enthousiasteling

demon

Geplaatst:
  • Auteur
Geplaatst:
bij dit stukje broncode hoort ook een CSS te zitten (waar de stijl in staat) zou je die eens hier willen zetten... (dit zijn er 2 zo te zien aan de broncode. fonts-min.css en tabview.css)

(als code tag of even inpakken en uploaden naar de server)

dan kan ik kijken waar het probleem precies ligt.

want ik heb veel websites al aangepast omdat hij meestal loopt te irriteren met DIV-jes. Ik gebruik liever ook geen DIV-jes maar gewoon tabellen.

maar plaats hem even hier op PcH, en ik zal even voor je kijken of ik de fout eruit kan halen.

MVGr,

Leroy

Leroy, het probleem is opgelost, ik heb 

Overflow: auto;

gebruikt op de content div :biggrin:

want ik heb veel websites al aangepast omdat hij meestal loopt te irriteren met DIV-jes. Ik gebruik liever ook geen DIV-jes maar gewoon tabellen.

Tabellen zijn enkel en alleen voor data in te houden zoals scores! Ze dienen niet voor een layout;)

Link naar reactie
Delen op andere sites
leroy Mentor

leroy

Geplaatst:
Geplaatst:

layouts worden gemaakt met tabellen hoor..

ga maar eens op deze site naar de broncode kijken (even een paar 100 regels naar beneden scrollen zodat je de css niet hebt)

en daar begint de layout met <table (en de rest)

en kijk bijvoorbeeld eens op tweakers.net

in het begin heb je divjes staan waar inderdaad ook een klein gedeelte van de pagina in wordt weergegeven, maar kijk eens tukje verder, en de pagina is compleet met tabellen opgebouwd...

Divjes zijn alleen bedoeld voor data (dus tekst en afbeeldingen) het is een inline element (HTML element - Wikipedia, the free encyclopedia)

for containing a piece of information inline with the surrounding text

je kunt met een div de achtergrond aanpassen en nog meer...

maar met tabellen kun je nog net ietsje meer

Bij tabellen heb je dus ook niet het probleem dat afbeeldingen die 600 pixels breedt zijn en de div zou 400 pixels breedt zijn dat de afbeelding er buiten komt steken. deze blijft netjes binnen de tabellijnen, of hij rekt de tabel uit.

een div met een standaard waarde laat de tekst buiten het div element komen, wat bij mensen met een heel klein beeldscherm niet mooi is.

en met tabellen heb je daar geen last van, en zeker niet als je percentages gebruikt, want dan past de site zich gewoon aan aan de breedte van je scherm. En niet de breedte die je hebt ingegeven.

Link naar reactie
Delen op andere sites
  • 7 maanden later...
Gast
Dit topic is nu gesloten voor nieuwe reacties.
 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.