hallo, ich möchte mehrere Elemente auf einer Seite positionieren.
Das Problem: ich weiss nicht wie ich die Struktur (vor allem HTML) am besten aufbaue.
Ich habe mir verschiedene Layouts angeguckt und danach was aufgebaut, weiss aber nicht ob und wann "class", "ul" oder "li" notwendig ist.
Keines der Objekte kann ich verschieben. Ich weiss nicht welches Objekt das ausschließt.
Anscheinend wird das Ganze von rechts ausgerichtet, ich habe aber nichts rechtsbündig
gefloatet, das ich aufheben müsste.
Ist der Ansatz grundsätzlich mit vier Boxen richtig?
Text wie "h1" und "p" besser über den restlichen Code anordnen?
Kann mir jemand einen Link- oder Buchtipp geben, wo ich die Struktur lerne?
Einzellektionen sind mir bekannt, nur im Kontext mit allem funktioniert nichts.
Bin für jeden Hinweis dankbar.
HTML Code:
CSS:
Das Problem: ich weiss nicht wie ich die Struktur (vor allem HTML) am besten aufbaue.
Ich habe mir verschiedene Layouts angeguckt und danach was aufgebaut, weiss aber nicht ob und wann "class", "ul" oder "li" notwendig ist.
Keines der Objekte kann ich verschieben. Ich weiss nicht welches Objekt das ausschließt.
Anscheinend wird das Ganze von rechts ausgerichtet, ich habe aber nichts rechtsbündig
gefloatet, das ich aufheben müsste.
Ist der Ansatz grundsätzlich mit vier Boxen richtig?
Text wie "h1" und "p" besser über den restlichen Code anordnen?
Kann mir jemand einen Link- oder Buchtipp geben, wo ich die Struktur lerne?
Einzellektionen sind mir bekannt, nur im Kontext mit allem funktioniert nichts.
Bin für jeden Hinweis dankbar.
HTML Code:
Code:
<body>
<div id="content">
<div id class="teaser">
<img src="images/pinker_pfeil.png"/>
</div>
<div id=""="content_teasertext">
<h2>EINS, ZWEI, DREI.</h2>
<p>Der Text für die erste Zeile ist gesetzt.<br>
Und hier folgt auch schon die zweite Zeile wie schön.</br>
Aller guten Ding sind drei. <em>>und noch was<em></p>
</div>
<div id="content_stripes1">
<img src="images/stripes_oben.png"/>
<h1>Arbeiten</h1>
</div>
<div id="content_arbeiten">
<img src="images/bild_gruen.jpg" alt= Bild einer Flaeche"/>
<img src="images/bild_weiss.jpg"/>
<img src="images/bild_rot.jpg"/>
<img src="images/bild_weiss.jpg"/>
<img src="images/bild_gruen.jpg"/>
<img src="images/bild_weiss.jpg"/>
<li>
<a ="Vorschaubild"/"><img src="images/bild_gruen.jpg" alt= Bild einer Flaeche"/></a>
<img src="images/bild_weiss.jpg"/>
<img src="images/bild_rot.jpg"/>
<img src="images/bild_weiss.jpg"/>
<img src="images/bild_gruen.jpg"/>
<img src="images/bild_weiss.jpg"/></li>
<h2>Projektbeschreibung</h2>
<p>Dtrala die feriou fref vghreuig jfvhrge vff jkudghuir frhiet fejuhrg.<br>
Edem ff das fhcewuif ufgwef cgzeu hdwgwzd hdgWZUZ DDD HDWSGDdbe fegf<br />
gefdzeuwgfvf ehdf ezgfzeuwgf fgezwgzwe ezgf.</p>
</div>
<div id="content_stripes2">
<img src="images/stripes_unten.png"/>
</div>
</div>
</body>CSS:
Code:
body {
background:#000;
font-size: 100.1%;
position: relative;
}
div#content {
position:relative;
}
#content. teaser {
position:relative;
display:inline-block;
}
#content. teaser img {
float: left;
margin-left: 50px;
clear: left;
}
#content. teaser teasertext {
margin: 0 60px 0 0;
}
#content. teaser h1 {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
color: #2f323b;
font-size:50px;
text-transform: uppercase;
}
#content. teaser p > em {
color: #2f323b; font-style:normal;}
#content. teaser p {
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
color: #fff;
line-height: 150%;
}
#content_stripes1 {
position: relative;
top: 350px;
left: 0;
}
#content_stripes1 img {
float: left;
width: 200px;
}
#content_stripes1 h1 {
padding: 4px;
}
#content_arbeiten {
position: relative;
margin: auto;
}
#content_arbeiten img {
display:inline-block;
padding:0px;
margin:8px;
position: relative;
}
#content_arbeiten h2 {
position:relativ;
left: 0;
}
#content_arbeiten p {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #2f323b;
}
#content_stripes2 {
position: relative;
right: 0;
}
