CSS positions problem

07/24/2013 16:02 MyLifeBeLike#1
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;
}
07/24/2013 16:41 MrPuschel#2
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.
07/24/2013 16:58 MyLifeBeLike#3
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
07/24/2013 17:39 MrPuschel#4
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.
07/24/2013 19:07 MyLifeBeLike#5
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 :D. 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?
07/24/2013 20:21 MrPuschel#6
Quote:
Originally Posted by MyLifeBeLike View Post
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 :D. 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:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Wichtig:
[Only registered and activated users can see links. Click Here To Register...]
07/24/2013 21:03 MyLifeBeLike#7
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%?
07/25/2013 00:33 MrPuschel#8
Quote:
Originally Posted by MyLifeBeLike View Post
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:

[Only registered and activated users can see links. Click Here To Register...]

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: [Only registered and activated users can see links. Click Here To Register...]
Wenn du es gar nicht hinkriegst, frag ruhig noch mal.