Positionierung von z.B. Text oder Bildern klappt nicht

suse2222

Mitglied
Guten Abend allerseits !

Ich möchte auf der Seite, http://www.ferienwohnungen-im-cilento.de, unter der Rubrik Ferienwohnungen, rechts in das freie Feld neben dem grossen Bild, eventuell Text oder auch kleinere Bilder ( z.B. 2 oben und 2 unten) einfügen.

Habs heute versucht, indem ich eine Tabelle einbauen wollte, diese wurde aber immer unter das grosse Bild gesetzt.

Ist dieser Bereich nicht beschreibbar oder warum klappt das nicht.



Danke !

Grüsse

Su
 
Hi,

in welchem DIV-Block (Bereich) hast du es denn versucht, und wie lautete der dazugehörige Quellcode (HTML & CSS)?

mfg Maik
 
Hallo Maik,

ich habe es bisher nur über den normalen Editor im Backend versucht. Muss ich etwas an der Breite ändern?


Quellcode :

<li><a href="/index.php?option=com_content&amp;view=category&amp;id=36&amp;Itemid=71&amp;lang=de"><span style="font-family: georgia,palatino; color: #051900; font-size: 14pt;">Ferienwohnung "BELVEDERE"</span></a></li>
</ul>
<p> <img src="/images/stories/Villa Albarosa-Appartamento Belvedere-Cucina-web.jpg" /> </p>
<p> </p>


Grüsse

Su
 
Aus dem unvollständigen Codeschnipsel kann ich auf den ersten Blick nicht nachvollziehen, welche Breite runterskaliert werden soll - es sei denn, die eingebundene Grafikdatei ist breiter als der Spaltenblock #header2, den ich mit Firebug zum relevanten DIV-Block auserkoren habe, da in deiner verlinkten Seite von deinem Versuch nichts zu sehen ist.

mfg Maik
 
Um es mal in meiner Sprache zu sagen : ); es soll alles im Content-Bereich bleiben) ...


<div id="header2">
</div>
<div id="main">
<div id="content">

<h2 class="componentheading ">

Ferienwohnungen</h2>

<div class="intro">
<p><span style="font-family: arial,helvetica,sans-serif;">Die Villa Albarosa bietet Ihren Gästen 3 Ferienwohnungen im typischen mediterranen Stil an, die alle 3 exklusiv und hochwertig eingerichtet sind. Die Ferienwohnungen sind ausserdem durch ein großes Platzangebot im Innenbereich gekennzeichnet und durch die weitläufigen Terrassen entwickelt sich ein "barrierefreies" Wohlfühlambiente.</span></p>
<p><span style="font-family: arial,helvetica,sans-serif;">Wir stellen Ihnen hier unsere 3 Ferienwohnungen vor:</span></p>
<p><span style="font-family: arial,helvetica,sans-serif;">Für Informationen bitte Wohnung anklicken: </span></p>
<ul>
<li><a href="/index.php?option=com_content&amp;view=category&amp;id=36&amp;Itemid=71&amp;lang=de"><span style="font-family: georgia,palatino; color: #051900; font-size: 14pt;">Ferienwohnung "BELVEDERE"</span></a></li>
</ul>
<p> <img src="/images/stories/Villa Albarosa-Appartamento Belvedere-Cucina-web.jpg" /> </p>

<p> </p>
<p> <span style="font-family: arial,helvetica,sans-serif;">Für Informationen bitte Wohnung anklicken: </span></p>
<ul>
<li><span style="font-family: georgia,palatino; color: #051900; font-size: 14pt;"><a href="/index.php?option=com_content&amp;view=category&amp;id=37&amp;Itemid=72&amp;lang=de">Ferienwohnung "AURORA"</a></span></li>
</ul>
<p><img src="/images/stories/Villa Albarosa-Appartamento Aurora-Cucina-web.jpg" /></p>
<p> </p>
<p> <span style="font-family: arial,helvetica,sans-serif;">Für Informationen bitte Wohnung anklicken: </span></p>
<ul>
<li><span style="font-family: georgia,palatino; color: #051900; font-size: 14pt;"><a href="/index.php?option=com_content&amp;view=category&amp;id=38&amp;Itemid=73&amp;lang=de">Ferienwohnung "ROMANTICO"</a></span></li>

</ul>
<p><strong><span style="color: #993366;"></span></strong></p>
<p><img src="/images/stories/Villa Albarosa-Appartamento Romantico-Terrazza-web.jpg" /></p>
<p><strong><span style="color: #993366;"></span></strong> </p>
<p> </p> </div>
<ul class="categories">
</ul>

</div>
</div>

<div class="clear"></div>

</div>

<div class="footer"> <div class="moduletable">

Aber natürlich hast Du Recht, nicht breiter als header 2 :)


Der CSS-Code:

header li,
#header2 li {
list-style-image: none;
}

#main {
width: 866px;
margin-top: 8px;
background-color: #ddffbb;
display: inline-block;
padding-bottom: 20px;
}

#content {
width: 840px;
float: left;
margin-left: 10px;
}

h2 {
font-size: 16px;
color: #700;
border-bottom: dotted 1px #fff;
line-height: 130%;
margin-top: 8px;
}
.clear {
clear: both;
}

#mainMenu h3 {
display: none;


Grüsse


Su
 
Zuletzt bearbeitet:
Wenn der Inhalt von #content das Bild rechts umfliessen soll, wären die rotmarkierten Zeilen im Code überhaupt nicht mehr erforderlich:
Code:
<div id="header2">
</div>
<div id="main">
<div id="content">

<h2 class="componentheading ">

Ferienwohnungen</h2>

<div class="intro">
<p><span style="font-family: arial,helvetica,sans-serif;">Die Villa Albarosa bietet Ihren Gästen 3 Ferienwohnungen im typischen mediterranen Stil an, die alle 3 exklusiv und hochwertig eingerichtet sind. Die Ferienwohnungen sind ausserdem durch ein großes Platzangebot im Innenbereich gekennzeichnet und durch die weitläufigen Terrassen entwickelt sich ein "barrierefreies" Wohlfühlambiente.</span></p>
<p><span style="font-family: arial,helvetica,sans-serif;">Wir stellen Ihnen hier unsere 3 Ferienwohnungen vor:</span></p>
<p><span style="font-family: arial,helvetica,sans-serif;">Für Informationen bitte Wohnung anklicken: </span></p>
<ul>
<li><a href="/index.php?option=com_content&amp;view=category&amp;id=36&amp;Itemid=71&amp;lang=de"><span style="font-family: georgia,palatino; color: #051900; font-size: 14pt;">Ferienwohnung "BELVEDERE"</span></a></li>
</ul>
<p> <img src="/images/stories/Villa Albarosa-Appartamento Belvedere-Cucina-web.jpg" /> </p>

<p> </p>
<p> <span style="font-family: arial,helvetica,sans-serif;">Für Informationen bitte Wohnung anklicken: </span></p>
<ul>
<li><span style="font-family: georgia,palatino; color: #051900; font-size: 14pt;"><a href="/index.php?option=com_content&amp;view=category&amp;id=37&amp;Itemid=72&amp;lang=de">Ferienwohnung "AURORA"</a></span></li>
</ul>
<p><img src="/images/stories/Villa Albarosa-Appartamento Aurora-Cucina-web.jpg" /></p>
<p> </p>
<p> <span style="font-family: arial,helvetica,sans-serif;">Für Informationen bitte Wohnung anklicken: </span></p>
<ul>
<li><span style="font-family: georgia,palatino; color: #051900; font-size: 14pt;"><a href="/index.php?option=com_content&amp;view=category&amp;id=38&amp;Itemid=73&amp;lang=de">Ferienwohnung "ROMANTICO"</a></span></li>

</ul>
<p><strong><span style="color: #993366;"></span></strong></p>
<p><img src="/images/stories/Villa Albarosa-Appartamento Romantico-Terrazza-web.jpg" /></p>
<p><strong><span style="color: #993366;"></span></strong> </p>
<p> </p> </div>
<ul class="categories">
</ul>

</div>
</div>

<div class="clear"></div>

</div>

<div class="footer"> <div class="moduletable">


mfg Maik
 
:)

Vielleicht solltest du dir aber nochmal über's Wochenende im stillen Kämmerlein Gedanken darüber machen, was du eigentlich willst, und wenn du mit dir im Reinen bist, ob nun der Inhalt von #content neben dem Bild beginnen, oder dort zusätzlich weiterer Inhalt in #header2 untergebracht werden soll, hier wieder vorsprechen.

mfg Maik
 
Halöle Maik,

eine Lösung wäre, wenn ich div`s mit float benutze, oder!?

Hab mich ins Kämmerlein begeben und ein bisschen CSS gelesen.... :)


Gruß

Su
 
Zurück