 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
FeeBaa
Threadersteller
Dabei seit: 04.02.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 19.03.2009 10:10
Titel CSS mit 3 Spalten klappt nicht :-( |
  |
|
Hi Forum,
Kann bitte jemand meinen Code anschauen und mir sagen, was ich falsch mache?
Meine rechte Spalte kommt einfach nicht nach oben.
Dies ist mein Stylesheet:
| Code: | #container {
margin:0px ;
clear:both;
width:667px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#160966;
}
#header {
width:665px;
height:112px;
margin:0px;
vertical-align:top;
padding:10px;
background-image:url(img/top.gif);
background-repeat:no-repeat;
clear:both;
}
#left {
width:219px;
margin:0px;
float:left;
padding:10px;
}
#middle {
margin:0px;
padding: 0px 20px 0px 20px;
}
#right {
width:160px;
margin:0px;
float:right;
vertical-align:top;
}
#bott {
width:665px;
height:112px;
margin:0px;
padding:5px;
background-image:url(img/g.jpg);
background-repeat:repeat-x;
clear: both;
}
#gr {
font-size:102%;
margin:0px;
} |
Und dies hier ist mein HTML:
| Code: | <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3 Spalten</title>
<link rel="stylesheet" type="text/css" href="my_style.css" />
</head>
<body>
<div id="container">
<div id="header"><div id="gr"><b>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</b></div>
</div>
<div id="left"><img class="left" src="img/links.gif" alt="Gross" width="219" height="207" border="0">
<img class="left" src="img/klein.gif" alt="Klein" border ="0">
</div>
<div id="middle"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/><br/>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
</div>
<div id="right"><img class="right" src="img/right.jpg" alt="Rechts" width="160" height="270" border="0"></div>
<div id="bott">
<b>Lorem ipsum dolor sit amet, consetetur:</b>
</div>
</div>
</div>
</body>
</html> |
Waer echt lieb, wenn mir jemand auf die Spruenge helfen kann. 
LG
FeeBaa
Zuletzt bearbeitet von m am Do 19.03.2009 10:57, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht: 
|
Verfasst Do 19.03.2009 10:38
Titel
|
|
|
Hi,
du musst immer erst floaten.
<linke Spalte><rechte Spalte><mittlere Spalte>
Hier der Code:
| Code: | <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3 Spalten</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#160966;
}
#container {
clear:both;
width:667px;
}
#left {
position:relative;
width:220px;
float:left;
padding:10px;
}
#middle {
position:relative;
margin-left:240px;
margin-right:180px;
width:auto;
}
#right {
position:relative;
width:160px;
padding:10px;
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="left">Linke Spalte</div>
<div id="right">Rechte Spalte</div>
<div id="middle">Mittlere Spalte</div>
</div>
</body>
</html> |
Und noch ein TIPP: Der mittleren Spalte solltest du immer einen Außenabstand (margin) geben, der so groß ist die die Breiten der umfliessenden Spalten, und keinen Innenabstand (padding)!
|
|
| |
 |
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 19.03.2009 10:55
Titel
|
|
|
| danielkussin hat geschrieben: | | Code: |
<div id="container">
<div id="left">Linke Spalte</div>
<div id="right">Rechte Spalte</div>
<div id="middle">Mittlere Spalte</div>
</div> |
Und noch ein TIPP: Der mittleren Spalte solltest du immer einen Außenabstand (margin) geben, der so groß ist die die Breiten der umfliessenden Spalten, und keinen Innenabstand (padding)! |
Wieso sollte man hier den Inhalt an das Ende des Dokumentes versetzen? 
Wenn man schon nicht die Reihenfolge der Darstellung im Quelltext einhalten will,
dann sollte man die Inhalte sicher nicht weiter nach hinten sondern weiter nach
vorne im Dokument holen.
| Code: | <div id="container">
<div id="middle">Mittlere Spalte</div>
<div id="left">Linke Spalte</div>
<div id="right">Rechte Spalte</div>
</div> |
|
|
| |
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Do 19.03.2009 11:03
Titel
|
|
|
Da es verschiedene Theorien gibt, was relevanter für Suchmaschinen ist, und ich die Meinung vertrete, dass Listennavigationen dazu gehören, hab ich immer erst den die Navigation und dann den Text, aber hier die Lösung dafür![/code]
| Code: | <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3 Spalten</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#160966;
}
#container {
clear:both;
width:600px;
}
#left {
position:relative;
width:400px;
float:left;
}
#left_right {
position:relative;
float:right;
width:200px;
}
#left_left {
position:relative;
width:200px;
float:left;
}
#right {
position:relative;
float:right;
width:200px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<div id="left_right">Mittlere Spalte</div>
<div id="left_left">Linke Spalte</div>
</div>
<div id="right">Rechte Spalte</div>
</div>
</body>
</html> |
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 19.03.2009 11:50
Titel
|
|
|
| danielkussin hat geschrieben: | | Da es verschiedene Theorien gibt, was relevanter für Suchmaschinen ist, und ich die Meinung vertrete, dass Listennavigationen dazu gehören, hab ich immer erst den die Navigation und dann den Text, aber hier die Lösung dafür! |
Theorien interessieren mich nicht  Und von einer Theorie die sagt man solle den Inhalt so weit wie möglich
am Ende des Dokumentes platzieren habe ich persönlich noch nie gehört
Was spricht dagegen die Spalten auch in korrekter Reihenfolge im Quelltext unterzubringen?
| Code: | <div>links</div>
<div>mitte</div>
<div>rechts</div> |
und andernfalls kann man auf ein zusätzliches Divison Element verzichten
| Code: | <div>mitte</div>
<div>links</div>
<div>rechts</div> |
Was aber eigentlich zu sagen ist, das wurde hier alles schon hundert mal durchgekaut,
einfach mal die Suche benutzen, direkt zu Selfhtml springen oder einen Blick in
die ähnlichen Themen unter diesem Beitrag werfen. 
Zuletzt bearbeitet von m am Do 19.03.2009 11:52, insgesamt 2-mal bearbeitet
|
|
| |
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Do 19.03.2009 12:02
Titel
|
|
|
| Zitat: | Was spricht dagegen die Spalten auch in korrekter Reihenfolge im Quelltext unterzubringen?
(...)
und andernfalls kann man auf ein zusätzliches Divison Element verzichten |
Dagegen sprechen in erster Linie die CSS-Anweisungen (wenn du die passenden Befehle hast, dann poste die mal), und gegen die fehlenden Divs spricht das Verhalten von "Clear", wenn mann zum Beispiel in einer Spalten noch einmal floaten möchte, und das dan clearen (siehe "das globale Verhalten von Clear" und "gegeneinander Floaten").
Gruß Daniel
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 19.03.2009 13:27
Titel
|
|
|
| danielkussin hat geschrieben: | | (wenn du die passenden Befehle hast, dann poste die mal) |
Wie gesagt, da findet man einiges über die Suche
|
|
| |
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Do 19.03.2009 13:45
Titel
|
|
|
Nur weil es viel ist, heisst es nicht, dass das auch richtig ist.
Wie gesagt, ich lass mich gern eines Besseren belehren, wenn es wirklich ein robustes Konzept gibt, dass auch Browser übergreiffend funktioniert. Aber bis jetzt habe ich noch nie eines kennengelehrt, und da du es ja eingeworfen hast, scheinst du ja Eines zu kennen, deswegen poste es doch mal!?
Gruß Daniel
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
css > spalten ...
Browserweiche IE klappt nicht
php klappt in ff aber nicht im ie ?
Dynamische Menüleiste - wie klappt's?
Swf in Avi o.ä. konvertieren klappt garnicht
Verlinkung klappt nicht
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
