• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS will nicht wie ich will :-)

A

AxelFoley

Neues Mitglied
Hallo zusammen,

ich habe ein HTML File und ein CSS File. Beim CSS File stehe ich vor folgenden Problemen:

1. Ich möchte das die gesamte Page immer in der Mitte des Browsers ist. Dachte das funktioniert mit der Funktion margin: auto;?
2. Die Logo Box sollte eigentlich links bündig neben der header box stehen. Leider verstehe ich hier nicht, wieso er sie oben links ansetzt
und die Header Box unten drunter statt rechts daneben setzt.

Vlt. könnt ihr mal über die Codes schauen. Für Tipps wäre ich sehr dankbar.

Danke.

LG
Axel

HTML: 
<html>
<head>
<title>Lorem ipsum</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id ="holder">
<div id="logo">
<p>logo</p>
</div>
<div id="head">
<h1>lorem ipsum</h1><br>
</div>
<div id="nav">
<a href="link1.html">link1</a> 
<a href="link2.html">link2</a>
<a href="link3.html">link3</a> 
<a href="link4.html">link4</a>
<a href="link5.html">link5</a>
</div>
<p>Lorem ipsum.</p><br>
<p>lorem ipsum.</p><br>
<p>lorem ipsum.</p><br>
<p>lorem ipsum</p><br>
<p>lorem ipsum</p>
</div>
</body>
</html>

Code: 
body {
 body {
 font: 100% Verdana, Geneva, sans-serif;
 color: #000000;
 background: #999;
 margin: 0px;
 padding: 0px;
}
#holder { 
     width: 900px;
 height: 600px;
 background: #FF9;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0; 
 margin-bottm: 0;
 
}
#head {
 width: 700px;
 height: 80px;
 padding-top: 10px;
 margin-left: 200px;
 padding-left: 200px;
 background: #69F;
}
#logo {
 width: 200px;
 height: 80px;
 margin: 0 0 0 0;
 padding: 0;
 background: #FF3333;
}
#nav {
 width: 900px;
 height: 25px;
 padding-top: 5px;
 marging-top: 80px;
 background: #FFCC66;
}
 
Werbung:
Hallo

CSS will nicht wie ich will
Zum Vergrößern anklicken....

Das ist schon mal der falsche Ansatz. Du musst dich dem CSS anpassen und dazu natürlich die Regeln erst mal lernen. Basteln geht nach hinten los.

Es wäre schöner, wenn du den Quelltext online gestellt und einen Link gesetzt hättest. Dann wären dir eventuell auch bereits einige Fehler aufgefallen, z. B. in der CSS-Datei das doppelte body-Attribut oder Tippfehler wie "margin-bottm" und "marging-top".

Dachte das funktioniert mit der Funktion margin: auto;?
Zum Vergrößern anklicken....

Stimmt.

Leider verstehe ich hier nicht, wieso er sie oben links ansetzt und die Header Box unten drunter statt rechts daneben setzt.
Zum Vergrößern anklicken....

Da fehlen dir wichtige Grundlagen. Beschäftige dich mal mit den Stichworten Blockelemente, float und clear sowie dem Zusammenspiel von width, margin und padding.

Gruss

MrMurphy
 
Werbung:
Das Problem sitzt immer vor dem PC, ich weiß :-) Danke für die Tipps, bin auch schon viel weiter und es schaut jetzt so aus wie gewünscht. Dachte ich zumindest, denn ich war sehr überrascht, dass im Firefox alles schön und gut aussieht, im IE wird aber gar nicht auf mein Stylesheet zugegriffen und ich bekomme nur den HTML Inhalt ausgegeben. Wisst ihr vlt. woran das liegt? Anbei auch nochmal die aktuellen Codes;

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id ="holder">
<div id="head">
<div id="logo">
<p>logo</p>
</div>
<h1>lorem ipsum</h1><br>
</div>
<div id="nav">
<a href="link1.html">link1</a> 
<a href="link2.html">link2</a>
<a href="link3.html">link3</a> 
<a href="link4.html">link4</a>
<a href="link5.html">link5</a>
</div>
<p>Lorem ipsum.</p><br>
<p>lorem ipsum.</p><br>
<p>lorem ipsum.</p><br>
<p>lorem ipsum</p><br>
<p>lorem ipsum</p>
</div>
</body>
</html>

Code: 
@charset "utf8";
body {
    font: 100% Verdana, Geneva, sans-serif;
    color: #000000;
    background: #999;
    margin: 0px;
    padding: 0px;
}
#holder {    
        width: 900px;
    height: 600px;
    background: #FF9;
    margin-top: 0px;
     margin-right: auto; 
     margin-bottom: 0px;
     margin-left: auto;

}
#head {
    width: 900px;
    height: 80px;
    padding-top: 0px;
    margin-top: 0;
    background: #69F;
}
#logo {
    width: 200px;
    height: 80px;
    margin 0px;
    padding: 0;
    background: #FF3333;
    float: left;
    
}
#nav {
    width: 900px;
    height: 25px;
    padding-top: 5px;
    marging-top: 80px;
    background: #FFCC66;
}
 
Die Ursache habe ich gefunden. Es liegt wohl am Doctype. Gemäß HTML5 besteht dieser doch nur noch aus <!DOCTYPE html>. Frage mich jetzt nur, wieso Firefox alles korrekt darstellt und der IE nicht?
 
Stell die Seite mal online, poste einen Link, dann kann man alles im Gesamtzusammenhang beurteilen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben