regel inline krijgen

[Gregor]

Hallo,

CSS vraagje. Op http://www.uisge-beatha.eu/logboek/292/ ... ingen.html staat de social media regel onder de datum-regel. Ik zou deze graag op dezelfde regel willen. Nu ziet een deel van de detail template van cgblog er als volgt uit:

Code: Select all

<h3 id="NewsPostDetailTitle">{$get_title}</h3>

<hr id="NewsPostDetailHorizRule"></hr>

{if $entry->category}
	<div id="NewsPostDetailCategory">
		{$category_label} {$entry->category}
	</div>
{/if}

{if $entry->postdate}
   <div id="NewsPostDetailDate">
      {$entry->postdate|date_format:'%a, %d %b %Y'}
   </div>
{/if}

<div id="BlogCounter">
   {CGFeedback key1="CGBlog" key2=$entry->id action='ratings' ratingstemplate="feedback_counter"}  |  Dit artikel is {HitCounter key1="CGBlog" key2=$entry->id} keer bekeken.
   {global_content name='SocialMedia'}
</div>

{if $entry->summary}
   <div id="NewsPostDetailSummary">
	{eval var=$entry->summary}
   </div>
{/if}

De code voor de SM-regel is:

Code: Select all

{* AddThis Button BEGIN *}
<div class="addthis_toolbox addthis_default_style">
   <a class="addthis_button_facebook_like" fb:like:width="115" {*fb:like:layout="button_count"*}></a>

   <a class="addthis_button_tweet"></a>
   <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
   <a class="addthis_counter addthis_pill_style"></a>
</div>
{* AddThis Button END *}

En de CSS:

Code: Select all

#main hr#NewsPostDetailHorizRule {
margin-bottom:4px
}

#NewsPostDetailDate {
background:url(http://www.uisge-beatha.eu/images/cms/date.jpg) no-repeat;
font-weight:700
}

#BlogCounter {
background:url(http://www.uisge-beatha.eu/images/cms/comments.jpg) no-repeat
}

.addthis_toolbox addthis_default_style {
}

#SocialMedia {
}

#BlogCounter,#NewsPostDetailDate {
display:inline;
font-size:90%;
margin-bottom:5px;
margin-right:5px;
padding-bottom:2px;
padding-left:20px;
padding-top:2px
}

#NewsPostDetailSummary {
color:#919191;
font-size:15px;
font-weight:700;
line-height:120%;
margin-top:10px
}

#NewsPostDetailContent {
line-height:110%;
margin-bottom:15px
}

Met deze twee ben ik aan het stoeien geweest (nu bewust leeg gelaten)

.addthis_toolbox addthis_default_style {
}

#SocialMedia {
}

maar krijg het niet voor elkaar om ze op een regel te krijgen.

Zou iemand me een 'duwtje' in de juiste richting willen geven?

Thanks, Gregor

[pedes]

uw div van uw blogcounter en de div van de social media allebei een float left geven, zodat ze naast elkaar komen, ook op hun beide breedte letten zodat ze netjes naast elkaar kunnen passen.

mvg,
Peter

[Gregor]

Dank je Peter.

Dit werkt deels. Kijk maar eens naar de pagina; er staan nu teksten op plaatsen waar ze niet zijn bedoeld Heb je een suggestie hoe dit op te lossen?

Thnks, Gregor

[compufairy]

Hoi Gregor,

M.b.t. floaten van css blokken, hier vind je een tutorial waar ik destijds zelf heel veel aan gehad heb. Kort en helder uitgelegd:
http://css.maxdesign.com.au/floatutoria ... itions.htm

Groetjes,

Anne-Mieke

[Gregor]

Hoi Anne-Mieke,

Stukken gelezen, dank voor de tip.

Ik denk dat het probleem zit in de opbouw van de blog pagina met de verschillende css-onderdelen. Punt is dat ik daar niet helemaal het overzicht in krijg (misschien schiet gewoon mijn css-kennis te kort )

Groet, Gregor

[compufairy]

Ik herken het hoor, had ik in het begin ook. Wat mij destijds ook enorm geholpen heeft om te snappen welk blokje met welke naam waar werd aangeroepen, is door in Firefox de Webdeveloper toolbar te gebruiken en daar "outline current elements" aan te zetten. Dan zie je hoe een bepaalde div heet zodra je er op wijst.

Ik maakte dan een ouderwetse print van de code van de template, en kon dan precies zien wat waar werd aangeroepen. Daar maakte ik dan aantekening van op mijn printje.

Inmiddels weet ik het uit mijn hoofd, door veel te doen. Maar ja, daar heb ik wel een tijd voor nodig gehad. Ik heb meer verstand van marketing en mooie plaatjes ontwerpen dan van code *grijns*.



Anne-Mieke

[stv]

Als je float gebruikt, zorg dan dat je dit altijd afsluit met een 'clear'. Dit voorkomt dat elementen eronder gaan verschuiven.

Je kan het oplossen met <div class="clear"></div> (.clear {clear:both}) onder je .SocialMedia te zetten of in jouw specifieke geval #NewsPostDetailSummary {clear:left} meegeven.

Succes

[Gregor]

Even off line geweest...

Het afsluiten met een clear, doe je dat dan in het css na elke id of class??

Want, dit werkt wel:

Code: Select all

#NewsPostDetailSummary {clear:left} 

En dit werkt niet:

Code: Select all

{if $entry->summary}
   <div id="NewsPostDetailSummary">
	{eval var=$entry->summary}
   </div>
   <div class="clearb"></div> 
{/if}

Gregor

[stv]

.clear (clear:both) gebruik je als de laatste child een float bevat. Als bijv alleen de eerste child een float bevat en de twee niet, dan kan je de tweede id/class een clear meegeven in css.

Voorbeeld 1

Code: Select all

<div id="wrapper">
  <div class="links" style="float:left; width:49%;"></div>
  <div class="rechts" style="float:right; width:49%"></div>
  <div style="clear:both"></div>
</div>

Voorbeeld 2

Code: Select all

<div id="wrapper">
  <div class="links" style="float:left; width:49%;"></div>
  <div class="normaal" style="width:100%; clear:left"></div>
</div>

Als je float gebruikt moet je daarna altijd clearen. In IE7 zie je snel genoeg of je iets vergeten bent. Daar verschuift alles gelijk.