CSS CSS/DIV Tabelle erstellen!

Barket · 31. Januar 2012

Ich soll als Hausübung eine HTML Website erstellen.

So soll es aussehen:
http://www.picfront.org/d/8v0G

Ich habe die div in einer index.html und die Gestaltung soll in einer eignen style.css drinnen sein.

Ich bekomme es leider nicht so hin...
Weiß einer wie ich das hinbekomme?

Hier die style.css:

#container {
width: 90%;
height: 90%
}

#linksoben {
border: 1px solid black;
width: 32%;
height: 30%;
padding: 5%;
background-color: black;
color: white;
float: left;

}

#mitteoben {
border: 1px solid black;
width: 32%;
height: 30%;
padding: 5%;
text-align:center;
background-color: red;
float: left;

}

#rechtsoben {
border: 1px solid black;
width: 32%;
height: 30%;
padding: 5%;
text-align: right;
float: right;
background-color: green;
}

#linksmitte {
border: 1px solid black;
width: 32%;
height: 30%;
padding: 5%;
background-color: yellow;
}

#mittemitte {
border: 1px solid black;
width: 32%;
height: 30%;
padding: 5%;
background-image: url(logo.png);
}

#rechtsmitte {
border: 1px solid black;
width: 32%;
height: 30%;
}

#linksunten {
border: 1px solid black;
width: 32%;
height: 30%;
}

#mitteunten {
border: 1px solid black;
width: 32%;
height: 30%;
}

#rechtsunten {
border: 1px solid black;
width: 32%;
height: 30%;
}

PiPaPa · 31. Januar 2012

Ähm CSS ganz gut und schön, aber die Tabellen Tags haben weiterhin ihre Gültigkeit. Um Tabellen darzustellen verwendet man weiterhin die <table> Attribute und macht das nicht per DIV und einer CSS File.

Wenn dein Lehrer verlangt eine Tabelle per DIV zu gestalten hat er schlichtweg keine Ahnung.

Barket · 31. Januar 2012

Ich habe es so hinbekommen!

HTML:

<html>
<head>
<title>
Boxmodell
</title>

<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="container">

<div id="linksoben">
Box links oben
</div>

<div id="mitteoben">
Box mitte oben
</div>

<div id="rechtsoben">
Box rechts oben
</div>

<div id="linksmitte">
Box links mitte
</div>

<div id="mittemitte">
Box mitte mitte
</div>

<div id="rechtsmitte">
Box rechts mitte
</div>

<div id="linksunten">
Box links unten
</div>

<div id="mitteunten">
Box mitte unten
</div>

<div id="rechtsunten">
Box rechts unten
</div>

</div>

</body>

</html>

CSS:

#container {
width: 90%;
height: 90%;
}

#linksoben {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
background-color: black;
color: white;
float: left;
margin: 1%;

}

#mitteoben {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
text-align:center;
background-color: red;
float: left;
margin: 1%;

}

#rechtsoben {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
text-align: right;
float: left;
background-color: green;
margin: 1%;
}

#linksmitte {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
float: left;
background-color: yellow;
margin: 1%
}

#mittemitte {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
float: left;
text-align:center;
background: url(logo.png) no-repeat center;
color: red;
margin: 1%
}

#rechtsmitte {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
float: left;
text-align: right;
background-color: blue;
color: white;
margin: 1%
}

#linksunten {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
float: left;
background-color: gray;
margin: 1%
}

#mitteunten {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
float: left;
background-color: fuchsia;
text-align: center;
margin: 1%
}

#rechtsunten {
border: 1px solid black;
width: 30%;
height: 30%;
padding: 5%;
float: left;
background-color: lime;
text-align: right;
margin: 1%
}

OhNoIKilledMyHD · 31. Januar 2012

Poste doch bitte auch mal Dein html, da es Deine Hausübung ist und nicht unsere

Lies wie Float funktioniert und rüste das nach im css.

edit:
oh, Du kamst mir zuvor.
Guter Fortschritt, aber noch lange nicht ganz sauber.
Gib mal dem äußeren Container eine Hintergrundfarbe, oder nimm Firefox, um es Dir anzusehen
oder ziehe das Browserfenster kleiner...

Barket · 31. Januar 2012

Ist jetzt drinnen!

Daaron · 31. Januar 2012

Kleiner Tip:
Lies die Optionen von "display" durch.
Oder hat dein Lehrer etwa nicht nur hirnlos erfordert, dass du eine Tabelle in Div machst, sondern auch noch, dass es in Browsern der Holzklasse läuft?

Suche

CSS CSS/DIV Tabelle erstellen!

Barket

Cadet 3rd Year

PiPaPa

Banned

Barket

Cadet 3rd Year

OhNoIKilledMyHD

Lieutenant

Barket

Cadet 3rd Year

Daaron

Fleet Admiral

Ähnliche Themen