Webdesign 2 – CSS 3

22. Juni 2009 | Von: Natalie | In: NEWS, | Kommentieren! |

http://24ways.org/2008/shiny-happy-buttons

private websites kein impressum aber geschäftlich besser!

the IE6 equasion

Hausübung: kobe seitengerüst fertigmachen

50% methode oder container erhält ein margin auto

__________________________________________________

netter slider: http://www.phatfusion.net/

__________________________________________________

blockelemente nebeneinanderstellen

du bist ein inline (display: inline;)- verliert ALLE GRÖSSENANGABEN ALS EINSTELLUNGSMÖGLICHKEITEN!

float left oder right.

wir machen eine FLOAT STUDIE. dokument studie_float.htm

und geben 2 divs ein, NICHT verschachtelt sonder nacheinander:

sidebar, maincontent, fügen blindtext ein

200 briet 200 hoch, hintergrundfarben vergeben

studie_float

____________________________________________________

<body>
<div id=”sidebar”>Raum für den Inhalt von id “sidebar”
<div id=”maincontent”>Raum für den Inhalt von id “maincontent”<br />
</div>
</div>
</body>
</html>

______________________________________________________

jetzt bekommt der SIDEBAR das float: left und höhe, breite 200/200

MAINCONTENT viel blindtext eingeben, dann sieht man die umfliessung gut.

wenn sidebar beliebig lang wird, wie mach ich dass umfloated?

dem MAINCONTENT margin left 210pixel (10 mehr als SIDEBAR weit ist)

somit haben wir ein zweispaltiges layout.

GRAUSLICH IN CSS: keine 2 SPALTEN GLEICH HOCH einstellbar

tricks: hintergrundbild vertikal wiederholt erzeugt streifen, der stehenbleibt, egal wie hoch der text den balken ausdehnt

______________________________________________________

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type=”text/css”>
<!–
#sidebar {
background-color: #99FF99;
height: 200px;
width: 200px;
float: left;
}
#maincontent {
background-color: #FFCC33;
margin-left: 210px;
}
–>
</style>
</head>

<body>
<div id=”sidebar”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div id=”maincontent”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
</body>
</html>

index

kobe_screen_______________________________________________________

beim wrapper die höhe rausnehmen

_______________________________________________________

Trainer macht eine Alternative mit POSITION ABSOLUTE. Text kann hier nicht mehr beliebig wachsen!!!

overflow: hidden; - schneidet alles ab DA GEHT TEXT VERLOREN!!!

overflow: auto; - da kommt scrollbalken wenn nötig

index

_______________________________________________________