PHP Forum - DIV Boxen untereinander rechts

PHP Forum (http://www.selfphp.de/forum/index.php)

- HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)

- - DIV Boxen untereinander rechts (http://www.selfphp.de/forum/showthread.php?t=21454)

DIV Boxen untereinander rechts

Hallo!

Ich habe folgendes Problem:
Ich möchte in einem übergeordneten DIV - 3 div container rechts positionieren aber untereinander (soll für Werbung auf der Seite sein.)

HTML Code:

HTML-Code:

<div id=main>

                <div id="promo">test</div>

                

                <div id="promo2">test</div>

                 

                <div id="promo3">test</div>



</div>

CSS Code:

HTML-Code:

#promo {

        float: right;

        margin-top: 30px;

        padding-right: 40px;

        background: url(../images/promo_1.jpg) no-repeat;

        width:236px;height:155px; 

}



#promo2 {

    float: right;

        margin-top: 30px;

        padding-right: 40px;

        background: url(../images/promo_1.jpg) no-repeat;

        width:236px;height:155px; 

}



#promo3 {

        float: right;

        margin-top: 30px;

        padding-right: 40px;

        background: url(../images/promo_1.jpg) no-repeat;

        width:236px;height:155px; 

}

Was mache ich falsch??

Vielen Dank
mr_transistor

AW: DIV Boxen untereinander rechts

HTML

Code:

<div id="main">

   <div id="rechts">

      <div class="promo" />

      <div class="promo" />

      <div class="promo" />

   </div>

......

   <br class="clear" />

</div>

CSS

Code:

#rechts

{

   float:right;

}



.promo

{

   /*whatever*/

}



.clear

{

   clear:both;

}

ungetested

AW: DIV Boxen untereinander rechts

hallo!

vielen dank für deine hilfe...

danke und lg
mr_transistor

AW: DIV Boxen untereinander rechts

Hallo Leute,

ich habe ein ähnliches Problem. Ich möchte gern ein Layout nach diesem Gerüst aufbauen:

http://www.fotos-hochladen.net/uploa...o5u4zykajp.jpg

Unter dem Logo soll noch ein dropdown menü eingefügt werden. Die zwei kleinen Bilder im Header sind Bilder die verlinkt werden soll. ich bekomme es nicht hin, das ich 3 container untereinander habe : (. Ich habe mir jetzt ein Grundgerüst nachgebaut, aber wenn ich versuche mehrere Container untereinander zu erstellen, sieht man nichts davon.

Die 3 unteren Kästchen sind Bilder, die aber nicht verlinkt werden und dann kommt noch der footer. Weiss jemand Rat? Wäre echt super lieb, muss heute noch vorankommen damit. Vielen Dank im voraus :)

Mein bisheriger code:

html:

Code:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Unbenanntes Dokument</title>

<link rel="stylesheet" href="design-style.css">

</head>





<body>

<div id="webseite">

test test



<div id="header">

<h1>Hallo Hallo</h1>

</div>



<div id="main">

        <div id="menu">



</div>





<div id="inhalt">



        </div>

</div>



<div id="footer">



</div>



</div>

</body>

</html>

CSS:

Code:

@charset "utf-8";

/* CSS Document */



body{

background-color:lightyellow;

text-align:center;

}



#webseite{

width:980px;

margin:0 auto;

}



#header{

width:980;

height:150px;

background:orange;

}



#header h1{

padding:50px;

font-size:60px;

font-weight:bold;

font-family:Courier;

}



#main{

width:980px;

}



#menu{

float:right;

width:200px;

height:300px;

background:yellow;

margin-top:10px;

margin-bottom: 10px;

border-radius: 2px;

-moz-border-radius: 2px;

webkit-border-radius: 2px;

-o-border-radius:2px;



}



#inhalt{

float:left;

width:770px;

height:300px;

background-color:darkred;

margin-top:10px;

margin-bottom:10px;

-moz-border-radius: 2px;

webkit-border-radius: 2px;

-o-border-radius:2px;

}



#footer{

width:980px;

height:30px;

background:orange;

border-radius:5px;

-moz-border-radius: 2px;

webkit-border-radius: 2px;

-o-border-radius:2px;

margin-top:20px;

clear:both;

}

AW: DIV Boxen untereinander rechts

EDIT:
mein Text betrifft diesen Beitrag:
http://www.selfphp.info/forum/showpo...79&postcount=4

1. HTML: der Validator bemeckert

Zitat:

Error found while checking this document as XHTML 1.0 Transitional!
Result: 1 Error, 1 warning(s)

Dummerweise betriffts diese Zeile:

Zitat:

Error Line 6, Column 48: end tag for "link" omitted, but OMITTAG NO was specified

<link rel="stylesheet" href="design-style.css">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Da kommt es also auf die Gnade des Browsers an.

CSS Validator:

Zitat:

Ergebnisse des CSS-Validators TextArea (CSS level 3)
Entschuldigung! Es wurden die folgenden Fehler gefunden (4)
URI : TextArea
15 #header Ungültige Nummer : width nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 980
40 #menu Die Eigenschaft webkit-border-radius existiert nicht : 2px
53 #inhalt Die Eigenschaft webkit-border-radius existiert nicht : 2px
63 #footer Die Eigenschaft webkit-border-radius existiert nicht : 2px

↑ Top
Warnungen (6)
URI : TextArea
39 Die Eigenschaft -moz-border-radius ist eine unbekannte Erweiterung des Herstellers.
41 Die Eigenschaft -o-border-radius ist eine unbekannte Erweiterung des Herstellers.
52 Die Eigenschaft -moz-border-radius ist eine unbekannte Erweiterung des Herstellers.
54 Die Eigenschaft -o-border-radius ist eine unbekannte Erweiterung des Herstellers.
62 Die Eigenschaft -moz-border-radius ist eine unbekannte Erweiterung des Herstellers.
64 Die Eigenschaft -o-border-radius ist eine unbekannte Erweiterung des Herstellers.

↑ Top
Ihr validiertes Cascading Style Sheet:
@charset "utf-8";
body {
background-color : lightyellow;
text-align : center;
}
#webseite {
width : 980px;
margin : 0 auto;
}
#header {
height : 150px;
background : orange;
}
#header h1 {
padding : 50px;
font-size : 60px;
font-weight : bold;
font-family : Courier;
}
#main {
width : 980px;
}
#menu {
float : right;
width : 200px;
height : 300px;
background : yellow;
margin-top : 10px;
margin-bottom : 10px;
border-radius : 2px;
}
#inhalt {
float : left;
width : 770px;
height : 300px;
background-color : darkred;
margin-top : 10px;
margin-bottom : 10px;
}
#footer {
width : 980px;
height : 30px;
background : orange;
border-radius : 5px;
margin-top : 20px;
clear : both;
}

AW: DIV Boxen untereinander rechts

Hi,

Zitat:

Wäre echt super lieb, muss heute noch vorankommen damit

Anhang von deinem Bild weiß man nichts darüber wie sich das verhalten soll wenn content
größer ist.

Ansonsten ist das Aufbau 0815 wenn du dieses nicht hinbekommst, solltest du YAML
benutzen.Das nächste wäre ja, das auf verschiedenen Endgeräten verschieden anzuzeigen.

MfG

CKaos