gaaaaanz einfaches div template

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

Autor dieses Themas

17:35, 31.1.2011

hi, nachdem ich immer wieder an fertigen templates verzweifle (bin ja noch jung =) ) mache ich nebenbei auch noch ein paar übungen.

diesmal von hier: http://www.time4joomla.de/templates/53-templates-selber-machen.html?start=1

hab das auch nur ganz leicht abgeändert, also das _beispiel hinter den id-namen weggelassen und styletechnisch ein bisschen rumprobiert.

leider hat es mit die id_"rechts" entweder und die "links" geschoben und selbst als ich den style von der seite benutzt habe ist mein rechts jetzt neben "unten".

hier noch kurz der code, is echt einfach:

<html>
<head>
<link rel="stylesheet"
href="templates/bla/css/template.css"
type="text/css" />
</head>
<body>
<div id="oben">oben</div>
<div>
<div id="links">links</div>
<div id="mitte">mitte</div>
<div id="rechts">rechts</div>
</div>
<div id="unten">unten</div>
</body>
</html>

und das style-sheet:

#oben {
border-width:thin;border-style:solid;border-color:#000000;
background-color:#FFFF00;
}

#links {
width:200px;float:left;border-width:thin;border-style:solid;border-color:#000000;
background-color:#80FF80;
}

#rechts {
width:200px;float:right;border-width:thin;border-style:solid;border-color:#000000;
background-color:#00FF80;
}

#mitte {
margin: 0 15.5em;border-width:thin;border-style:solid;border-color:#000000;
background-color:#80FFFF;
}

#unten {
border-width:thin;border-style:solid;border-color:#000000;
background-color:#FF8040;
}

und hier noch mein css-verbrechen =)

#oben{
width: 100%;
border: 1px dotted;
font-size: 14px;
font-style: bold;
color: yellow;
background:black;
}
#links{
width:200px;
float:left;
border-width:thin;
border-style:solid;
border-color:#000000;
background-color:#80FF80;
}
#mitte{
margin: 0px;
padding: 0px;
width:200px;
float: center;
border-width:0px;
border-style:solid;
border-color: purple;
background-color: blue;}
#rechts{
margin: 0px;
padding: 0px;
width: 200px;
border: 0px solid green;
font: 15px yellow;
background: blue;}
#unten{
width:100%;
float:left;
border-width:thin;
border-style:solid;
border-color:#000000;
background-color:#80FF80;
}

bitte nicht an der disharmonie stören und mal wieder vielen dank im vorraus

.
.
.
ok, habs findet...habe bei"mitte" das margin vergessen

Beitrag zuletzt geändert: 31.1.2011 17:57:21 von it-heberle

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
color

color hat kostenlosen Webspace.

13:01, 1.2.2011
Hi

float: center; gibt es nicht. float: none|left|right aber nicht center.
0px solid green; macht nicht viel sinn, 0px ist so zu sagen leer.
Thin als angabe ist nicht zu empfehlen, benutz doch 1px 2px ...

Gib den Containern noch eine Höhe, ich denke dann sollte es passen.

Wenn du Firefox nutzt, lad dir das Add-n Firebug runter, dann kannst du live testen und kommst schneller ans Ziel,
wenn du Chrome nutzt, dann kannst du dort die Entwicklertools verwenden.

Grüsse
Color

Beitrag zuletzt geändert: 1.2.2011 13:02:41 von color
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city