CSS #container zentrieren

matinfaal · 18. April 2014

Hallo, ich bin neue und habe mir eine Website gemacht aber ich kann leider nicht das cotainer in mittle zu bringen besser gesagt ich will das es sich bei fester bsw. Monitor Größe anpasst hier unten finden sie dass CSS und HTML.

Code

body{
	float: left;
	background-color : #FF5F00;
	color : #000000;
	font-size: 12px;
	font-family : Arial;
	margin: 55px 0px 0px 0px;
	padding: 10px;
	background-repeat: no-repeat;




}




#container{
	width: 1230px;
	text-align: left;
	position: absolute;
	margin-left: -510px;
	z-index: 0;
	background-color: #000000;
	margin-right: 100px;
	left: 530px;
	right: 450px;
	margin-top: -39px;
	}

#logo{
	width: auto;
	display: block;
	left: 0px;
	}





	#navigation .current-menu-item > a,
body.tax-portfolio_cats #navigation .portfolio-page > a{
	color: #fff;
	background: #66c3bc url("http://xhtmlforum.de/images/bg-gradient.png") repeat-x;
	margin-top: -1px;
	height: 60px;
	line-height: 60px;
	}

#main{
	width: auto;
	display: inherit;
	padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	/* [disabled]margin-left: 10px; */
	margin-top: 20px;
	}




div.spacer{
	clear:both; 
	height:0px; 
	display:block; 
	position: relative;
	}

#footer{
	width: 980px;
	display: block;
	padding: 5px;
	font-size: 11px;
	background-color: #000000;
	position: absolute;
	bottom: 1px;
	left: 0px;
	height: -10px;
	margin-bottom: -11px;
	}




td{
	font-size: 15px;

}
a:link, a:visited, a:hover{
	color : #000000;
	font-weight : normal;
	font-size: 12px;
text-decoration:underline;
}
a:hover{
	right: 11px;
}




.bkgcolor {
	background-color : #FFFFFF;
}




.footer {
	background-color : #000000;
}




.footerfont {
	color : #FFFFFF;
	font-size: 12px;
}
a.footerlink:link, a.footerlink:visited ,a.footerlink:active, a.footerlink:hover {
	text-decoration:none;
	color: #FFFFFF;
	font-size: 12px;
}




a.footerlink:hover {
	text-decoration:underline;
}




a.maplink:link, a.maplink:visited, a.maplink:active, a.maplink:hover {
	text-decoration:underline;
	color: #000000;
	font-size: 14px;
	font-weight : bold;
}




a.maplink:hover {
	color: #FFFFFF;
}




.hr1{
	border: thin dotted #FFFFFF;
}




#main ul
{
overflow:auto; 
padding:10px 10px 10px 22px;
margin:0px;
}




#main li
{
margin-left: 12px;
}




#Spalte1 {
	width: 405px;
	float:left;
}




#Spalte2 {
	margin-left: 424px;
}
#column_left{
	width: 140px;
	margin-right: 0px;
	float: left;
	margin-left: -10px;
	margin-top: 42px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

#column_right{
	margin-right: 5px;
	overflow: hidden;
	margin-left: 10px;
	margin-bottom: -15px;
	/* [disabled]right: 1px; */
	}




#column_right2{ 
	width:120px; 
	float:right; 
	margin-left:10px; 
	padding-left: 0px;
	}

#column_left2{ 
	margin-left:20px; 
	overflow:hidden;
	}

a.menu, a:visited.menu, a:hover.menu {
	background: #FF7523;
	padding-left: 15px;
	text-decoration: none;
	display: block;
	width: 108px;
	min-height: 30px;
	color: #000000;
	margin-top: 1px;
	FONT-SIZE: 15px;
	FONT-FAMILY: Arial;
	padding-top: 20px;
	font-weight: 900;
	margin-bottom: 1px;
	vertical-align: middle;
	text-align: center;

	}




a:hover.menu {
	background-repeat: no-repeat;
	background-position: 3px 5px #377CB7;
	background-color: #FF7523;
	background-attachment: fixed;
	margin-left: -10px;
	text-align: center;
}
a.submenu, a:visited.submenu, a:hover.submenu {
	background: url('dot2.gif') no-repeat 15px 5px #2F79B7;
	padding-left: 24px;
	text-decoration: none;
	display: block;
	width: 96px;
	min-height: 15px;
	color: #FFFFFF;
	margin-top: 1px;
	FONT-SIZE: 13px;
	FONT-FAMILY: Arial;
	padding-top: 1px;
	font-weight: bold;
	margin-bottom: 1px;
}




a:hover.submenu {
	background: url('dot2.gif') no-repeat 15px 5px #2F6A9B;
}

Alles anzeigen

Und mein HTML :

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>Home</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta name="description" content="Home" />
<meta name="keywords" content="Home" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Markus Schuster" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="Bilder/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="https://apis.google.com/js/platform.js">
{lang: 'de'}
</script>
</head>
<body>
<div align="center" style="width=100%">
<div id="container">
<div id="logo"><a href="index.html"><img src="logo.jpg" alt="Home" title="Home" border="0" /></a></div>
<div id="main">
<div id="column_left"><br />
<a class="menu" href="index.html" style="background-color: #FF7523; margin-left: -10px; text-align: center;" >Home</a>
<a class="menu" href="events.html">Events</a>
<a class="menu" href="location.html">Location</a>
<a class="menu" href="team.html">Team</a>
<a class="menu" href="vermietung.html">Vermietung</a>
<a class="menu" href="gaestebuch.html">G&auml;stebuch</a>
<a class="menu" href="kontakt.html">Kontakt</a>
</div>
<div id="column_right"><br />
<div style="font-size: 25px; color: #FFFFFF;" align="center">Home
</div>
<hr class="hr1" />
&nbsp;




<br />
</div>
<div class="spacer">&nbsp;</div>
<div align="center">
<BR />
<BR />




<BR /><BR />
</div>
</div>
<div id="footer">
<div align="center" class="footerfont">
<a class="footerlink" href="impressum.html">Impressum</a>
|<a class="footerlink" href="idaenschutz.html"> &copy; Copyright Palleti </a>
&nbsp;
</div>
</div>
</div>
</div>
<br />
</body>
</html>

Alles anzeigen

Ich bitte um schnelle Antwort bitte !

MfG Matin

wolf · 18. April 2014

Naja,
erstmal, herzlich willkommen im Forum!

bitte einmal lesen: Den eigenen Code lesbar im Forum präsentieren

Zur Frage
Um sich der Monitor Größe anzupassen braucht es % Werte..

Horizontale zentrierung eines Elements:

CSS

element{
    width: 90%;
    margin: auto;
}

Ein kleiner Tipp von mir..
du kannst dir dein #container sparen und einfach dein body zentrieren..

CSS

html{
    background-color : #FF5F00;
    color : #000000;
    font-size: 12px;
    font-family : Arial;
    background-repeat: no-repeat;
}
body{
    background-color: #000000;
    width: 90%;
    margin: auto;
    margin-top: 50px;
    padding: 10px;




    /* meines Erachtens unnnötig: */
    /*
    position: absolute;
    text-align: left;
    z-index: 0;
    */
}

Alles anzeigen

matinfaal · 18. April 2014

Also so weit hat alles geklappt !
Aber es gibt 2 weitere Problemen
1. Das logo (Header)
2- Das Footer

wolf · 18. April 2014

Wo liegt denn das Problem?

matinfaal · 18. April 2014

Ich lad kurz mein website hoch ...

matinfaal · 18. April 2014

http://test.faals.de/

So da ist nur eine seite !
versuch mal dein Browser kleiner und größer machen dann siehst du was ich mein !!!

wolf · 18. April 2014

Das liegt an deinen ganzen komischen Position absolutes,
ich würde dir empfehlen die Seite nochmal grundlegend neu aufzubauen und zu strukturieren.

-html5 tags verwenden
-ohne positon angaben arbeiten
-mit % werten arbeiten
-responsive arbeiten Tutorial Responsive Webdesign (Grundsätze / Media Querries)

matinfaal · 18. April 2014

hab mitlereweile footer hinbekommen aber das mit logo bekommen ich nicht hin egal wie ich das einpasse ist es großer
hast du me idee wie ich dass logo mach soll ?

Hast du dir angeschaut wenn man die fenster größer oder kleiner macht wie es aussieht !!?

grüß Matin

wolf · 18. April 2014

habe mal für dich gearbeitet, <sarcasmn mode="on">kostet 20€.</sarcasmn>
http://jsfiddle.net/wolfwortmann/Tw3Nq/embedded/result/

Zu deinem BG Problem

CSS: 22

background-size: 100% auto;

Code

HTML

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <header>
    </header>
    <div><!-- google+ --></div>
    <aside>
        <nav>
            <ul>
                <li><a href="">Eins</a></li>
                <li><a href="">Zwoa</a></li>
                <li><a href="">Drei</a></li>
            </ul>
        </nav>
    </aside>
    <section>
        <article>
            <!-- Gallerie -->
        </article>
    </section>
    <footer>
        &copy;, nobody cares!
    </footer>
</body>
</html>

Alles anzeigen

CSS

/* reset */
*{margin: 0; padding: 0;}
html{
    background-color: rgba(255,117,35, 1);
    color: rgba(255,255,255, 1);
}
body{
    width: 90%;
    margin: auto;
    background-color: rgba(0,0,0, 1);
}
a{
    color: rgba(255,255,255, 0.6);
    text-decoration: none;
}
a:hover{
    color: rgba(255,255,255, 1);
}
/* nur header ansprechen, die DIREKTE Kinder von body sind */
body>header{
    background: url(hierDasBild.jpg) no-repeat scroll 0 0;
    background-size: 100% auto;
    height: 100px;
    width: 100%;
}
body>div{
    margin: 140px 20px auto 20px;
}
body>section{




}
/* aside und article */
body>aside, body>section{
    float: left;
    padding: 20px;
    /* bewirkt, das border und padding das Elem. nicht vergrößern */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body>aside{
    width: 140px;
}
/* a Elem. ansprechen, die kinder von nav sind */
nav a{
    /* ein block element draus machen (box klickbar) */
    display: block;
    color: rgba(0,0,0, 1);
    padding: 20px;
    text-align: center;
    background-color: rgba(255,117,35, 1);
    border-bottom: 2px solid rgba(0,0,0, 1);
}
nav a:hover, nav a:active{
    margin-left: -3px;
    margin-right: 3px;
    color: rgba(0,0,0, 1);
}
/* listen Punkte ausschalten */
nav li{
    list-style-type: none;
}
body>section{
    /* Seite - menü - rechter Abstand*/
    width: calc(100% - 140px - 20px);
    min-height: 300px;
    background-color: rgba(255,255,255, 0.5);
    margin-top: 20px;
}
body>footer{
    /* float stopping */
    clear: both;
    background-color: rgba(0,0,0, 1);
    padding: 10px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

Alles anzeigen

matinfaal · 18. April 2014

Wie soll bitte zahlen ?

wolf · 18. April 2014

ok, sorry, dachte das wäre schon sarkastisch genug um aufzufallen
das ist natürlich NICHT ernst gemeint mit dem zahlen!
Wäre auch bisschen blöd zu sagen du musst zahlen und den Code tdz. gleich mitzuposten

matinfaal · 18. April 2014

hab ich mir quasi auch mit gedacht !

Aber ich habe es tatsächlich geschafft aber muss sagen das nichts von dir war

ich wird morgen das hochladen dann kannst du es sehen !

gute Nacht !

wolf · 19. April 2014

Ich würde dir trotz alledem empfehlen nochmal das ganze zu erneuern, deine Website kommt aus einem WSIWYG Editor, stimmts?
Die ganzen position: absolutes und ähnliches machen es dir unnötig schwer!

The Scout · 19. April 2014

Jiop, erneuern wäre gut.
Wenn du bisher mit einem WYSIWYG Editor (auch gerne WYSIWYP - What you see is what you puke ^^) gearbeitet hast, dann schau mal hier: Umstieg in geeignete EntwicklungsumgebungDa wird erklärt, welche Programme es braucht, wenn man Webseiten bauen will, und auch, wie man es unter Windows schafft, dass PHP lokal läuft.

Denn sobald man mehr als 3 Seiten hat, kann einem PHP das Leben enorm erleichtern
Daher Tipp von mir:
1) aktuelle Webseite in die Tonne treten und bei null anfangen (keine Angst, das kommt noch öfter, das ist normal)
2) Das oben verlinkte "Tutorial" bis exklusive PHP nutzen durchlesen, verstehen und umsetzen
3) Das HTML &CSS Seminar durcharbeiten um diese Vorrasusetzungen zu lernen
4) Damit ein wenig rumspielen
5) Wenn du dich sicher genug in HTML & CSS fühlst, dann den PHP Kurs durcharbeiten
6) Damit ein wenig spielen, gerne auch unter Einbezug des PHP Handbuchs, in dem sämtliche PHP Funktionen erklärt werden (teilweise englisch)
7) So mit HTML, CSS & PHP gerüstet, wieder ins Ernste gehen und deine Webseite neu aufbauen

Das wird eine Weile dauern, das ist klar, aber wenn du nicht weiter weißt, dafür gibts ja das Forum und uns hier
Du kannst natürlich anstatt einfacj rumzuspielen, direkt wieder mit der Webseite loslegen, allerdings wirst du dann Schritt 1) zumindest teilweise och öfter wiederholsen dürfen

wolf · 19. April 2014

&wenn du aus Zeitgründen den html/css Teil vorerst überspringen möchtest, nutze meine Vorlage, darfst du gerne

flo96 · 28. April 2014

schau dir mal miene website an... ich hatte das selbe problem mit dem header usw... http://www.dietotenkoepfe.de
weis dass sie nicht ganz aktuell ist... wegen umzug leider ein wenig verhindert kann dir den css mal geben wenn benötigt

CSS #container zentrieren

Jetzt mitmachen!

Teilen