✔ Probleme mit CSS

  • Themenstarter Themenstarter Wissenscoder
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
W

Wissenscoder

Guten Tag!
Habe ein Problem mit meinem CSS Design. Habe zur Verdeutlichung eine Skizze angefertigt (siehe Anhang).

So nun zu meinem Problem:
Also für die weiße Fläche auf der Skizze steht ein Hintergrundbild, welches mit repeat-y wiederholt wird.
Habe die Position: relative angegeben.
Das klappt auch nun alles ganz gut, jedoch wird das Hintergrundbild (Skizze weiß) nicht bis zum Ende wiederholt.
Es liegt daran, dass ich bei dem Text 2 die Position auf absolute gesetzt habe. Dies muss ich jedoch, da das Hintergrundbild zentriert ist und ich auf Grund der Browser Auflösung der jeweiligen User keine feste oder prozentuale Größe angeben kann. Wie bekomme ich das Problem in den Griff?
 

Anhänge

  • skizze_Der_seite.jpg
    skizze_Der_seite.jpg
    23,9 KB · Aufrufe: 16
Hi,

kannst du mal den dazugehörigen Quellcode (HTML + CSS) posten, oder einen Link zur Seite nennen?
 
hier die wichtigen css codes:
Code: 
body{
background-color: #480001;
background-image: url(./images/hintergrund.jpg);
background-repeat: repeat-x;
}

#seite{
position: relative;
width: 800px;
margin: auto;
background-image: url(./images/bg2.jpg);
background-repeat: repeat-y;
}

Für den Seitenhintergrund und seite für den weißen hintergrund.

Code: 
#news {
position: absolute;
left: 610px;
top:220px;
right: 0px;
width:180px;
min-width:180px;
margin:0px;
padding:0px;
text-align: justify;
}

Das ist für den Text 2
 
Hi,

vielleicht hilft dir diese Methode weiter, bei der die beiden Spalten mit Hilfe der float-Eigenschaft erzeugt werden?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}

body {
background: #480001 url(./images/hintergrund.jpg) repeat-x ;
}

#seite {
position: relative;
width: 800px;
margin: auto;
background: #fff url(./images/bg2.jpg) repeat-y;
}

#text1 {
float: left;
width: 620px;
}

#news {
float: right;
margin-top: 220px;
width: 180px;
min-width: 180px;
padding: 0px;
text-align: justify;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div id="seite" class="clearfix">
     <div id="text1">
          <p>Text</p>
     </div>
     <div id="news">
          <p>News</p>
     </div>
</div>

</body>
</html>
 
Hi,

damit die umschliessende Box #seite die volle Höhe annimmt und der Hintergrund nach unten wiederholt wird, muss die Float-Umgebung zum Abschluß "gecleart" werden - schau dir hierfür mein Lösungsbeispiel nochmal genauer an.
 
ok danke, wenn du dir die Seite anschaust...siehste, dass ich es nun fast so hinbekommen habe. Nun noch 1 Fragen:

1. Frage: Wie bekomme ich es hin, dass die News auf der Seite (rechts) etwas weiter nach links gerückt werden und nicht so am Rand "kleben"?
 
Erweiter das Stylesheet mit der folgenden Regel, um für das im DIV #news verwendete p-Element einen rechten Innenabstand zu bestimmen:

Code: 
#news p {
padding-right: 20px;
}
und ziehe diesen Wert von der derzeitigen Breitenangabe für die p-Elemente ab (width:180px - padding-right:20px = 160px), damit die Boxbreite gemäß dem Boxmodell erhalten bleibt. Oder du verzichtest auf die Breitenangabe vollständig.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück