✔ Design verschiebt sich beim verkleinern der Ansicht

Status
Nicht offen für weitere Antworten.
C

cssfieber

Grünschnabel
Hallo,

ich möchte eine CSS Seite basteln, die ohne Tabellen auskommen muss.
Die Seite soll mit 760px zentriert und die volle Höhe des Browsers nutzen. Links und rechts an dieser Seite kleben graphische Elemente mit einer Breite von jeweils 10px.
Bis hier hin klappt noch alles.

Wenn ich aber eine Navigationsleiste in einer Höhe von 150px einfüge und dann die Größe vom IE Fenster ändere und dann runterscrolle ist das Design verschoben. Wie kann ich das Ändern?

Hier der CSS Code:

Code: 
<style type="text/css">
<!--

html, body
{
	background-color: green;
	margin: 0px 0px 0px 0px;
	height:100%;
}

#container 
{
	width:780px;
	background-color:#EEEEEE;
	margin-right:auto;
	margin-left:auto;
	padding:0px 0px 0px 0px;
	min-height: 100%; 
    height:100%;
	z-index: 1;
}

#randlinks
{
  position:absolute;
  left:50%;
  width:10px;
  height: 100%; 
  margin-left:+380px;
  background-color: black;
  background-repeat: repeat;
}
  
#randrechts
{
  position:absolute;
  left:50%;
  width:10px;
  height: 100%; 
  margin-left:-390px;
  background-color: black;
  background-repeat: repeat;
}

#navigationsleiste 
{
  position:absolute;
  left:50%;
  width:760px;
  height:19px;
  top:150px;
  margin-left:-380px;  
  background-color: red;
  background-repeat:repeat;
  z-index: 2;
}

-->
</style>

und hier Code html:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <div id="container">
   <div id="navigationsleiste"></div> 
   <div id="randlinks"></div>
   <div id="randrechts"></div>
 </div>
</body>
</html>
 

Anhänge

  • css1.gif
    css1.gif
    3,5 KB · Aufrufe: 169
  • css2.gif
    css2.gif
    4,4 KB · Aufrufe: 175
Warum so umständlich, wenn links und rechts ein 10px-breiter Rahmen sein soll?

Code: 
html, body
{
        background-color: green;
        margin: 0px 0px 0px 0px;
        height:100%;
}

#container
{
        width:760px;
        background-color:#EEEEEE;
        margin-right:auto;
        margin-left:auto;
        padding:0px 0px 0px 0px;
        min-height: 100%;
        height:100%;
        border-left: 10px solid #000000;
        border-right: 10px solid #000000;
}

#navigationsleiste
{

  width:760px;
  height:19px;
  margin-top:150px;
  background-color: red;
  background-repeat:repeat;
}
HTML: 
<div id="container">
   <div id="navigationsleiste"></div>
 </div>
 
Ja, so einfach wär es wenn der Rand einfach nur 10px groß sein soll. Aber der Rand soll aus graphischen Elementen bestehen.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>EDV Mulack</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

html, body
{
	background-image: url(images/bg.gif);
	margin: 0px 0px 0px 0px;
	height:100%;
}

#contentcenter	{

	margin: auto;
	width: 780px;	
	min-height: 100%; 
    height:100%;
	bottom:0px; 
}

#maincontent	{

	width: 780px;
	bottom:0px;
	min-height: 100%; 
    height:100%;
	background-color: #EEEEEE;
}

#randlinks
{
  width:10px;
  height: 100%; 
  margin-left:0px;
  background-image: url('images/randlinks.gif');
  background-repeat: repeat-y;
}

 
#randrechts
{ 
  width:10px;
  height: 100%; 
  margin-right:0px;
  background-image: url('images/randrechts.gif');
  background-repeat: repeat-y;
  
}
</style>
</head>

<body>
<div id="contentcenter">
    
	
	<div id="maincontent">
		<div id="randrechts"></div>
    	<div id="randlinks"></div>
	</div>

</div>
</body>
</html>
irgendwie verschiebt sich das dann wenn eine Graphik quer eingefügt ist, so wie bei den Beispielbildern die ich im Post davor angehängt hab.

Gruß
 
Zuletzt bearbeitet:
HTML: 
<!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">
<!--
html, body
{
background-image: url(images/bg.gif);
margin: 0;
padding: 0;
height:100%;
}

#box_main
{
width: 780px;
margin: 0 auto;
min-height: 100%;
height:100%;
padding: 0;
}

#box_left
{
float: left;
width: 10px;
background-image: url(images/randlinks.gif);
background-repeat: repeat-y;
height:100%;
}

* html #box_main #box_left /* 3px-Bug IE */
{
margin-right: -3px;
}

#box_center
{
margin: 0 10px;
width: auto;
background-color: #eeeeee;
min-height: 100%;
height:100%;
}

* html #box_main #box_center /* 3px-Bug IE */
{
margin: 0 7px;
}

#navigationsleiste
{
position: relative;
top: 150px;
height:19px;
background-color: red;
}

#box_right
{
float: right;
width: 10px;
background-image: url(images/randrechts.gif);
background-repeat: repeat-y;
height:100%;
}

* html #box_main #box_right /* 3px-Bug IE */
{
margin-left: -3px;
}

.clear
{
clear: both;
height: 0;
font-size: 0;
border: 0;
margin: 0;
padding: 0;
}
-->
</style>

</head>
<body>

<div id="box_main">

     <div id="box_left"></div>

     <div id="box_right"></div>

     <div id="box_center">
          <div id="navigationsleiste"></div>
     </div>

     <div class="clear"></div>

</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01
 
Wunderbar, danke für deine Hilfe aber eine Frage hätte ich da noch:

Wenn ich jetzt einen footer einbaue und das Fenster verkleinere bis der Scrollbalken auftaucht und dann nach unten scrolle verlängern sich die Randgraphiken nicht auf 100%.

Code:

Code: 
#footer { 
position:absolute; 
bottom: 0 !important; 
bottom: -1px; /* For Certain IE widths */ 
width:760px;
height: 35px;
background-image: url('images/footer.gif');
background-repeat: repeat-x;
z-index: 1;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück