zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten Layout!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.11.2005, 13:22
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard 3 Spalten Layout!

Hallo,

das erste mal, dass ich was per CSS mache!
Nur so als Test, wie findet Ihr das:

HTML:
Zitat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Mein HTML und CSS Test!</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="3sp_style.css" type="text/css" />
</head>
<body>

<div id="header">



WILLKOMMEN ZUM TEST!
</p>
</div>

<div id="menu">


Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden. </p>
</div>

<div id="right">


Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link! Bill Gates ist der reichste Mann der Welt. Er gründete mit
Microsoft das Symbol des Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.</p>
</div>

<div id="content">
<div class="news">
[img]img/q3_logo_6.gif[/img]
Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
[img]img/tutlogo.gif[/img]
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link! Bill Gates ist der reichste Mann der Welt. Er gründete mit
Microsoft das Symbol des Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
  1. Einführung
  2. Weiterführung
  3. Abschluss

Link!
<p class="news_border">
Written on 27. Juli 2005!
</p>
</div>

<div class="news">
[img]img/q3_logo_6.gif[/img]

Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link! Bill Gates ist der reichste Mann der Welt. Er gründete mit
Microsoft das Symbol des Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link!
<p class="news_border">
Written on 27. Juli 2005!
</p>
</div>
</div>

<div id="footer">



FOOTER erscheint hier!
</p>
</div>


</body>
</html>
CSS:
Zitat:
/*######
* Body
##############*/
body {
font-family: Verdana;
font-size: 12px;
line-height: 1.7em;
letter-spacing: 0;
text-align: left;
word-spacing: 0.2em;
text-decoration: none;
color: #444;
background-color: #fff;
}
/*######
* Links
##############*/
a:link {
color:#0000ff;
}
a:visited {
color:#dddddd;
}
a:hover {
color:#ff0000;
}
a:active {
color:#ff0000;
}

/*######
* Menu
##############*/
#menu {
width: 200px;
float: left;
display: block;
border: 1px solid #c3c3c3;
padding: 3px;
}

/*######
* RightMenu
##############*/
#right {
border: 1px solid #c3c3c3;
width: 200px;
float: right;
display: block;
padding: 3px;
}

/*######
* Header
* ############# */
#header p {
display: inline;
font-weight: bold;
font-size: 18px;
}

#header {
width: 100%;
text-align: center;
border-bottom: 1px dashed #ccccfa;
margin-bottom: 30px;
padding: 3px;
}

/* #####
* Footer
* ############*/
#footer {
width: 100%;
border-top: 1px solid #ccccfa;
margin-top: 20px;
text-align: center;
}
#footer p {
display: inline;
padding: 3px;

}

/*######
* News
##############*/
#content {
margin: auto;
width: 480px;
}
#content .news {
margin: auto;
width: 450px;
padding: 1px;
margin-bottom: 20px;
vertical-align: center;
}
#content .news_border {
font-style: italic;
font-size: 11px;
text-align: right;
border-top: 1px dashed #cccccc;
}
#content img.newspic {
border: 1px solid #bbbbbb;
padding: 2px;
float: left;
display: block;
margin-right: 12px;
}

Was ist überflüssig? Was ist sinnlos? Was ist schlicht und ergreifend dumm oder falsch?


Live: http://home.arcor.de/nsane11/web/3co...tenlayout.html
Validator: Klick

Andere Frage:
Was bedeuten die einzelnen DOCTYPE's, und welchen sollte man verwenden? SOrry dass ich frage, ich habe schon Threads hier im Forum gelesen, werde aber nicht richtig schlau

Danke
MFG
Björn[/quote]
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.11.2005, 14:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Also, was mir spomtan auffällt:
Zitat:
<div id="header">



WILLKOMMEN ZUM TEST!
</p>
</div>
Dafür gibts Überschriften!
Code:
<h1>
WILLKOMMEN ZUM TEST!
</h1>
, wobei du h1 im CSS so definierst wie #header!
Zitat:
[img]img/tutlogo.gif[/img]
Wenn das für die meisten Bilder, die bei den News vorkommen, gelten soll, könntest du das auch ohne die Klasse "newspic" machen:
Code:
.news img {...;}
Ansonsten siehts recht sauber aus. Du hast zwar fast etwas viele Divs, aber ich wüsste jetzt auch nicht, wie man da was ersetzen könnte.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.11.2005, 14:22
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

ok danke
Mit Zitat antworten
  #4 (permalink)  
Alt 14.11.2005, 12:15
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard Rollbalken

Hi Björn,

aufgefallen ist mir im berühmten IE, dass unten auch Rollbalken erscheinen, obwohl eigentlich nur die seitlichen gebraucht werden.

Gruß mimii
Mit Zitat antworten
  #5 (permalink)  
Alt 14.11.2005, 15:27
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

ah stimmt ... seltsam! weiß jmd, wie ich das eventuell beheben kann?

eine weitere frage habe ich:
wenn man den browser resized (also kleiner macht), dann schiebt sich der text-newstext unter das linke menü. kann man es irgendwie machen, dass der test-newstext sich einfach nur verschmälert, aber nie unter das menü rutscht?
danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei Spalten Layout unterschiedlich scrollbar MrMacStripe CSS 1 09.11.2013 20:00
2 Spalten Layout INKL. 1 Spalten Layout miedsegadse CSS 20 14.04.2011 01:02
Layout: 2 Spalten gleich langer Höhe Boof CSS 1 05.03.2010 11:50
3 Spalten fixed width css layout sharepointkb CSS 9 28.02.2010 21:00
3 Spalten Layout, mal anders Sushimeister CSS 2 05.03.2007 12:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:26 Uhr.