Problem mit der Höhe
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
anpassen
auto
bereich
bild
dank
duo
ecke
erzeugen
esse
fahne
header
http
image
layout
problem
rechte bereich
runden ecken
sache
text
url
-
Hallo es geht um folgende Seite,
http://kurelom.lima-city.de/Seite.gif
Mein Problem dabei ist, das die beiden Seitenkanten nicht vorhanden sind. Durch die runden Ecken musste ich sie als einzelndes div ausschneiden.
Der Content (der mittlere Teil mit Schrift) ist automatisch erweiterbar, die beiden Seitenkanten allerdings nicht. Das Problem dabei ist es darf kein Bild sein und mit Text werden sie auch nicht befüllt.
Sie sollen einfach nur nach unten automatisch weiter laufen, was sie nicht tun, habe da schon alle möglichen Sachen ausprobiert. ich stelle dadrunter noch mal die drei css dateien, die den Bereich beschreiben.
Ich habe da schon alle Möglichen Sachen wieder rausgeworfen, wie height und overflow etc
Es geht eigentlich darum, das der linke und rechte Bereich sich in der Höhe dynamisch zum Content-Bereich anpassen soll.
body
{
background-image: url(\'img/background.jpg\');
}
.layout
{
width: 915px;
margin:0 auto;
margin-top:20px;
}
.......................
.content
{
clear:both;
}
.content .left
{
float: left;
width: 26px;
background-image: url(\'img/content/links_rand_content.png\');
background-color: white;
background-repeat: no-repeat;
}
.content .center
{
float: left;
width:850px;
background-color:white;
}
.content .right
{
float: left;
width: 26px;
background-image: url(\'img/content/rechtsrand_content.png\');
background-repeat: no-repeat;
}
Beitrag geändert: 8.5.2008 12:19:45 von skorpion1976 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ich weis jetzt nicht genau wo dein Problem liegt, aber meine HP hat auch runde kanten und hatte da nen Prob mit der höhe..
ich hab einfach nen DIV mit ner bestimmten Höhe reingesetzt und dann sind auch meine runden ecken erhalten geblieben...wenn du das selbe Prob hast haste nu die Lösung ;) -
Es geht eigentlich darum, das der linke und rechte Bereich sich in der Höhe dynamisch zum Content-Bereich anpassen soll, das heisst es wird automatisch erweitert nach unten.
Also das Problem liegt nur bei Content right und left der Content center ist voll ok so. left und right darf keine festgelegte Höhe haben. -
ich versteh dein problem auch noch nicht ganz, wie wär es mit einem background-repeat:repeat-y; für die hintergrundbilder oder nem   als füllung und entsprechender hintergrundfarbe
-
Würdest du vll auch die HTML Struktur posten?
Ich hätte dazu automatisch folgendes gesagt: einfach \'.content .left\' und \'.content .right\' entfernen, \'.content .center\' zentrieren und ein/e einzige/s Hintergrundfarbe/Hintergrundbild für \'.content\' definieren.
Ryan -
erstmal danke bis hierher.
@robin das habe ich schon probiert das klappt nicht
@ryanblack das probiere ich mal schnell hier die HTML
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"//\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Seite</title>
<link type=\"text/css\" rel=\"stylesheet\" href=\"css.css\"/>
</head>
<body>
<div class=\"layout\">
<div class=\"header\">
<div class=\"logo\">
<div class=\"deutsch\">
</div>
<div class=\"englisch\">
</div>
</div>
<div class=\"bilder\">
</div>
<br/>
</div>
<div class=\"mainmenu\">
<div class=\"left\"></div>
<div class=\"center\"></div>
<div class=\"right\"></div>
</div>
<div class=\"content\">
<div class=\"left\"></div>
<div class=\"center\">„Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 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. 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.
</div>
<div class=\"right\"></div>
</div>
<div class=\"footer\">
<div class=\"left\"></div>
<div class=\"center\"></div>
<div class=\"right\"></div>
</div>
</div>
</body>
</html>
So das war HTML nun kommt noch mal die Stylesheets
body
{
background-image: url(\'img/background.jpg\');
}
.layout
{
width: 915px;
margin:0 auto;
margin-top:20px;
}
.layout .header .logo
{
width:915px;
height:126px;
background-image: url(\'img/header/header3.png\');
background-repeat: no-repeat;
}
.layout .header .logo .deutsch
{
width:26px;
height:18px;
background-image:url(\'img/header/fahne-deutschland.png\');
background-repeat:no-repeat;
float:right;
margin-right: 15px;
margin-top:100px;
}
.layout .header .logo .englisch
{
width:26px;
height:18px;
background-image:url(\'img/header/fahne-england.png\');
background-repeat:no-repeat;
float:right;
margin-top:100px;
}
.layout .header .bilder
{
width:900px;
height:98px;
background-image: url(\'img/header/header2.png\');
background-repeat: no-repeat;
margin-left: 0px;
}
.layout .mainmenu .left
{
float: left;
height: 46px;
width: 26px;
background-image: url(\'img/navi/Ecke-links-oben.png\');
background-repeat: no-repeat;
}
.layout .mainmenu .center
{
float: left;
width: 851px;
height: 46px;
background-image: url(\'img/navi/background.png\');
background-repeat: repeat-x;
}
.layout .mainmenu .right
{
float: left;
height: 46px;
width: 27px;
background-image: url(\'img/navi/Ecke-rechts-oben.png\');
background-repeat: no-repeat;
}
.content
{
clear:both;
}
.content .left
{
float: left;
width: 26px;
height:100%;
margin-left:auto;
background-color: white;
background-repeat: no-repeat;
}
.content .center
{
float: left;
width:850px;
background-color:white;
}
.content .right
{
float: left;
width: 26px;
background-image: url(\'img/content/rechtsrand_content.png\');
background-repeat: no-repeat;
}
.layout .footer
{
clear:both;
}
.footer .left
{
height:67px;
width:26px;
background-image:url(\'img/footer/Ecke-links-unten.png\');
background-repeat:no-repeat;
float: left;
}
.footer .center
{
height:67px;
width:850px;
background-image:url(\'img/footer/background.png\');
background-repeat:repeat-x;
float: left;
text-align:center;
color:white;
font-family:Arial;
font-size:14px;
padding-top:25px;
}
.footer .right
{
float: left;
height:67px;
width: 27px;
background-image:url(\'img/footer/ecke-rechts-unten.png\');
background-repeat: no-repeat;
float: left;
}
Beitrag geändert: 8.5.2008 13:22:10 von skorpion1976 -
ohne den inhalt des stylesheet hilft das auch nicht weiter
-
hehe danke habe ich ihm vorpost nachgetragen
-
habe deinen rat befolgt, super danke dir alles geklappt. content left und right rausgenommen nun geht es ich hoffe es geht auch im CMS
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"//\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Ihr Hotel</title>
<link type=\"text/css\" rel=\"stylesheet\" href=\"css.css\"/>
</head>
<body>
<div class=\"layout\">
<div class=\"header\">
<div class=\"logo\">
<div class=\"deutsch\">
</div>
<div class=\"englisch\">
</div>
</div>
<div class=\"bilder\">
</div>
<br/>
</div>
<div class=\"mainmenu\" style=\"height: 46px;\">
<div class=\"left\"></div>
<div class=\"center\"></div>
<div class=\"right\"></div>
</div>
<div class=\"content\">
„Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore<br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis<br />
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure<br />
Anscheinend gibt es wirklich keine Möglichkeit, einen variablen Spacer mittels CSS zu erzeugen. Theoretisch sollte es möglich sein, <br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero <br />
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure <br />
Anscheinend gibt es wirklich keine Möglichkeit, einen variablen Spacer mittels CSS zu erzeugen. Theoretisch sollte es möglich sein, etwas ähnliches <br />
</div>
<div class=\"footer\">
<div class=\"left\"></div>
<div class=\"center\"></div>
<div class=\"right\"></div>
</div>
</div>
</body>
</html>
Beitrag geändert: 8.5.2008 13:33:20 von skorpion1976 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
