axo und prefix entwerfen eine seite - alle anderen...

[prefix]

... sind herzlichst eingeladen, dabei mitzuhelfen und -zulernen

aufgrund dieses threads werden wir hier mal für axomento ein schönes css-basiertes layout gemeinsam entwerfen

[prefix]

also, zuerst müssen wir mal klären, ob wir eine pixeldefinierte seitenbreite wollen oder nicht (also relative breite in prozent)!

[pauel]

ok. prefix. Das Design kennst du ja schon wie geht es weiter?

*freu*

Ich stelle mich vor:

Hallo, mein Name ist Paul ich bin 1988 an einem schönen Wintertag in München/pasing geboren mit 5 zog ich in das etwa 20 bis 30 km weit von München entfernte Schondorf. So. das bin ich :



so. wie gehts weiter. was jetzt?

[pauel]

wir wollen eine pixeldefinierte seitenbreite. das heisst, die seite ist nur so breit wie der headder. die höhe sollte variabel sein... jenachdem wieviel inhalt ich habe. die seite sollte xhtml konform sein dass kann ich. nur die css bereitet mir schwirigkeiten... .

[prefix]

so, jetzt machst mal eine xhtml-datei und speicherst die mal ab (arbeitest du mit dreamweaver???)

danach erstell eine neue css-datei, speichere sie, binde sie in die xhtml-datei ein und dann poste den link

dann beginnen wir!

EDIT

das die seite so breit wie der header ist, ist mir klar *lol*

aber wie breit soll der header sein???

90% vom browserfenster??
760 pixel???

[pauel]

so, headder ist 612px breit. sollte aber nachher links, rechts, oben und unten um jeden Container nen 5px fetter Border sein...

www.pauel.de/prefix/index.php

[prefix]

na gut, gehen wir es an:

1. erstell in deinem style-sheet mal für den gesamten body folgendes:

- hintergrundfarbe
- schriftart
- schriftgröße

dann bitte den code posten (du sollst ja was lernen - ergo: mal selber machen und wir analysieren das dann gemeinsam)

nochwas: soll der gesamte inhaltsbereich im browserfenster zentriert werden??

[pauel]

[ot]
bin ma wat essen
[/ot]

soll ich die bilddateien auch hochladen?

[prefix]

nein, die brauchen wir noch nicht - guten appetit!

achja: dein link ladet ewig, hat das falsche doctype und noch keine referenz auf ein externes stylesheet!!

hier noch 3 ganz ganz wichtige links, die wir brauchen werden:

1. html-validator
2. css-validator

3. meine parallel-entwicklungsseite

[pauel]

die seite läd gar nicht ewig und ne css referenz ist auch da

[prefix]

also bei mir macht die seite nicht auf - nicht mal nach 1 minute!

"waiting for www.pauel.de....." - da hat es was

The requested URL could not be retrieved

While trying to retrieve the URL: http://www.pauel.de/prefix/index.php

The following error was encountered:

Unable to determine IP address from host name for www.pauel.de

The dnsserver returned:

Server Failure: The name server was unable to process this query.

This means that:

The cache was not able to resolve the hostname presented in the URL.
Check if the address is correct.

[prefix]

na, mal egal

ok, bitte mal per css wie oben beschreiben definieren, dann poste hier mal den code (hintergrundfarbe body, schriftart, schriftgröße usw.)

[pauel]

ich will die Seite fix positionieren .

hier mal meine CSS:

main.css {

PHP-Code:

body {
    background-color: #9E9E9E;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #A6AAB1;
} 


}

[prefix]

ok, das ist schon mal gut!

hierbei gilt es aber zu überdenken, ob du wirklich die schriftgröße in pixel definieren willst! damit nimmst du dem user (zumindest im ie) die chance, den text vergrößert darzustellen - aber ok, deine sache

gut, da du eine feste breite von 612 pixel breite willst, müssen wir es nun browserübergreifend schaffen, nach links, rechts und oben den gleichen abstand des hauptcontainers zum browserrand zu definieren.

hierbei zickt - wieder mal - der ie herum, weshalb wir einen hack einsetzen müssen:

body {
	text-align: center; /* damit der ie zentriert */
	background-color: #9E9E9E;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 9px;
   color: #A6AAB1;
}

.center { /* anwendung eines hacks */
	/*/*/
	text-align: left;
	/**/
	margin-left: auto;
	margin-right: auto;
	width: 612px;
}

jetzt definier bitte mal:

- den xhtml-quelltext (einbindung in das div-element -> neu erstellen -> klasse "center")

- zum layouten der klasse "center" einen 1px breiten weißen rahmen

[pauel]

ok, die index.php

PHP-Code:

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

<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <title>PAUEL feat. PREFIX - How to build a CSS Website (remix).mp3</title>
</head>

<body>

<div class="center"></div>

</body>
</html> 


und die main.css:

PHP-Code:

body {
   text-align: center; /* damit der ie zentriert */
   background-color: #9E9E9E;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 9pt;
   color: #A6AAB1;
}

.center {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 612px;
    border: 1px solid #ffffff;
} 


zu sehen: hier