CSS positions problem

MyLifeBeLike · 07/24/2013, 16:02

Hallo

Ich habe ein Problem in meinem Homepagedesign welches mit CSS geschrieben ist. Unzwar das wenn ich die Browsergröße ändere, endsteht eine lücke zwischen meinem Textfield_head und Textfield_main.. hier mein Css code:
(ich meine die textfield_x)

Code:

@import "reset.css";
/* CSS Document */
#header {
	margin-left:auto;
	margin-right:auto;
	top:0;
	left:15%;
	right:15%;
	height:250px;
	width:70%;
	min-width:800px;
	background-image:url(img/head.png);
	position:absolute;
	z-index:2;

}
#menu {
	height:75px;
	top:250px;
	width:70%;
	margin-left:auto;
	margin-right:auto;
	min-width:800px;
	left:15%;
	right:15%;
	background-image:url(img/menu.png);
	position:absolute;
	z-index:2;
}
#content {
	width:70%;
	height:897px;
	min-width:800px;
	margin-left:auto;
	margin-right:auto;
	top:328px;
	left:15%;
	right:15%;
	background-image:url(img/menu.png);
	background-size:70%;
	background-height:63%;
	position:absolute;
	z-index:2;
}
#sidebar {
	margin-left:0%;
	width:15%;
	float:left;
	background-image:url(img/transparent.png);
	position:absolute;
	z-index:2;
}
#rightbar {
	width:14%;
	margin-left:85%;
	float:right;
	background-image:url(img/transparent.png);
	position:absolute;
	z-index:2;
}
#footer {
	width:70%;
	margin-left:auto;
	margin-right:auto;
	top:1225px;
	left:15%;
	right:15%;
	min-width:800px;
	background:#999;
	height:75px;
	background-image:url(img/footer.png);
	position:absolute;
	z-index:2;
}
#figo {
	background-image:url(img/Figo.png);
	background-repeat:no-repeat;
	top:25px;
	left:35px;
	background-size:300px, 180px;
	margin-left:15%;
	width:70%;
	height:250px;
	min-height:120px;
	min-width:200px;
	position:absolute;
	z-index:3;
}
#strich {
	background-image:url(img/strich.png);
	background-repeat:repeat-x;
	margin-left:auto;
	margin-right:auto;
	left:15%;
	right:15%;
	height:3px;
	width:70%;
	min-width:800px;
	top:325px;
	position:absolute;
	z-index:3;
}
#textfield_head{
	background-image:url(img/textfield_head.png);
	background-repeat:no-repeat;
	background-size:100%, 100%;
	width:40%;
	height:40px;
	min-height:40px;
	top:364px;
	margin-left:30%;
	position:absolute;
	min-width:460px;
	z-index:3;
}
#textfield_main{
	background-image:url(img/textfield_main.png);
 	background-repeat:repeat-y;
	background-size:100%, 1px;
	width:40%;
	height:750px;
	top:389px;
	margin-left:30%;
	position:absolute;
	min-width:460px;
	z-index:3;
}
#textfield_bottom{
	background-image:url(img/textfield_bottom.png);
	background-repeat:no-repeat;
	background-size:100%, 100%;
	width:40%;
	height:40px;
	top:1139px;
	margin-left:30%;
	position:absolute;
	min-width:460px;
	z-index:3;
}

MrPuschel · 07/24/2013, 16:41

Ich kann dir aus dem Stegreif sagen das mehr als die Hälfte von dem was du geschrieben hast unnötig ist.

Poste dein html oder einen Link zu deiner Seite.

MyLifeBeLike · 07/24/2013, 16:58

HTML Code:

<head>
<title>Restoraunt Figo</title>
<link rel="stylesheet" href="browser.css" />
<link rel="stylesheet" href="text.css" />
</head>
<body bgcolor="#CCCCCC">

<div id="figo"></div>
<div id="header"></div>

<div id="sidebar"></div>
<div id="rightbar"></div>
<div id="menu"></div>
<div id="strich"></div>
<div id="content"></div>
<div id="textfield_head"></div>
<div id="textfield_main"></div>
<div id="textfield_bottom"></div>

<div id="footer"></div>
</body>

Das ist der HTML Code. Durchaus möglich das sehr viel unnötig ist, aber solange die seite läuft ist mir das recht

. Ein Link zur seite gibts noch nicht weil die im moment nur local ist

MrPuschel · 07/24/2013, 17:39

Ich habe mir das gerade mit Verstand angesehen und wäre fast erblindet. Nimm das, druck dir das aus, schweiß es ein und vergrabe es im Garten. In 10 Jahren gräbst du es aus und hast was zu lachen.

Ich habe dir mal eine Seite gebastelt von der ich annehme das es etwas ist das in die Richtung geht die du haben möchtest:

index.html

HTML Code:

<?xml version="1.0" ?>
<!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>Restaurant Figo</title>
      <link rel="stylesheet" type="text/css" href="screen.css">
   </head>
   <body>
      <div class="center">
         <div class="header">
            <ul class="nav">
               <li>
                  <a href="#">Menüpunkt</a>
               </li>
               <li>
                  <a href="#">Menüpunkt</a>
               </li>
               <li>
                  <a href="#">Menüpunkt</a>
               </li>
               <li>
                  <a href="#">Menüpunkt</a>
               </li>
            </ul>
         </div>
         <div class="content">
         </div>
         <div class="footer"></div>
      </div>
   </body>
</html>

screen.css

HTML Code:

* {
	padding:0px;
	margin:0px;
}

body {
	background-color:#F2F2F2;
}

.header, .nav, .content, .footer {
	width:100%;
}

.center {
	width:960px;
	margin:24px auto 0 auto;
	border:1px solid silver;
}

.header{
	position:relative;
	height:64px;
	background-color:#EAEAEA;
}

.nav {
	position:absolute;
	bottom:0px;
	left:0px;
	background-color:#DADADA;
}

.nav  li {
	display:inline-block;
}

.nav  li a{
	display:block;
	width:100%;
	height:100%;
	line-height:1.5em;
	text-decoration:none;
	color:black;
	padding:3px;
}

.nav  li a:hover{
	background-color:#727272;
	color:white;
}

.content{
	margin-top:24px;
	background-color:#EAEAEA;
	min-height:600px;
}

.footer{
	height:24px;
	margin-top:48px;
	background-color:#DADADA
}

Schau es dir mal an.

Ansonsten, nur weil es der Browser richtig anzeigt bedeutet es nicht das du es richtig gemacht hast. Moderne Browser korrigieren vieles für dich.

MyLifeBeLike · 07/24/2013, 19:07

uff... also ich muss schon sagen you made my day

ich bin den code mal mit wem durchgegangen der css auch versteht und jetzt hab ich ihn verstanden

. Das einzige was ich mich frag ist weiso hast du immer margin-top:24px; und so gemacht? war das gewollt das der content so ein bischen von content darüber entfernt ist?

MrPuschel · 07/24/2013, 20:21

Quote:

Originally Posted by MyLifeBeLike

uff... also ich muss schon sagen you made my day
ich bin den code mal mit wem durchgegangen der css auch versteht und jetzt hab ich ihn verstanden . Das einzige was ich mich frag ist weiso hast du immer margin-top:24px; und so gemacht? war das gewollt das der content so ein bischen von content darüber entfernt ist?

Nur wegen dem Abstand, damit man die Container besser auseinander halten kann.

Ansonsten:

Sehr, sehr wichtig:

Wichtig:

MyLifeBeLike · 07/24/2013, 21:03

Achso ich dachte du willst damit i-was anderes machen. danke für die hilfe

Edit: hab doch noch ne frage: wenn ich beim header die position auf absolute setzte, warum geht der dann nach rechts 100%?

MrPuschel · 07/25/2013, 00:33

Quote:

Originally Posted by MyLifeBeLike

Achso ich dachte du willst damit i-was anderes machen. danke für die hilfe

Edit: hab doch noch ne frage: wenn ich beim header die position auf absolute setzte, warum geht der dann nach rechts 100%?

Die Frage ist, warum willst du ihn überhaupt auf absolute setzen? Das macht keinen Sinn. Ich weis auch nicht was du mit "100% nach rechts" meinst, aber vermutlich das hier:

Schau dir den code im fiddle mal an und versuch es selbst herauszufinden. Du kannst ihn übrigens verändern und links oben auf "Run" klicken um ihn auszuführen. Damit kannst du experimentieren.

Das hier hilft dir dabei:

Wenn du es gar nicht hinkriegst, frag ruhig noch mal.