zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit CSS Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.07.2008, 17:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 16
jojoho befindet sich auf einem aufstrebenden Ast
Standard Problem mit CSS Layout

Hallo,

solangsam versteh ich echt nichtmehr, warum mein CSS Layout nicht richtig dargestellt wird.

hier ist der CSS Code + HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Name Ihrer Homepage</title>
<style type="text/css">

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#000000;
    background:#e6e6e6;
    }

#header_top {
    font-size:7pt;
    background:url('img/_1.png') no-repeat;
    margin: 0 0 0 0;
    text-align:right;
    width:800px;
    height:168px;
    } 

#navi_side {
    font-size:16px;
    background:url('img/_2.png') no-repeat;
    margin: 0 0 0 0;
    text-align:left;
    width:178px;
    height:732px;
float:left;
    }

#navi_top {
padding: 12px;
color: white;
float:left;
font-size:16px;
background:url('img/_3.png') no-repeat;
margin: 0 0 0 0;
text-align:left;
width:622px;
height:47px;
    }



#navi_top a:link {
color: white;
}

#navi_top a:visited {
color: white;
}

#navi_top a:hover {
color: green;
}

#footer {
float:left;
padding: 5px;
    background:url('img/_5.png') no-repeat;
    margin: 0 0 0 0;
    text-align:left;
    width:622px;
    height:59px;

    }

#content {
float:left;
    padding: 5px;
    background:url('img/_4.png') no-repeat;
    margin: 0 0 0 0;
    text-align:left;
    width:622px;
    height:626px;
}



</style>
</head>

<body>

<h1 id="header_top"><a href="#">Kontakt</a> <a href="#">Sitemap</a> <a href="#">Impressum</a></h1>
<div id="navi_side">Navigation:</div>
<div id="navi_top">
   	<a href="#">Link</a> 
        <a href="#">Link</a> 
        <a href="#">Link</a> 
        <a href="#">Link</a> 
        <a href="#">Link</a> 
        <a href="#">Link</a> 
        <a href="#">Link</a>
    </div>




  <div id="content">
  </div>
<div id="footer">
Das ist ein Footer
</div>
</body>
</html>
und so gibt es der Browser aus:

http://www.bilder-hochladen.net/files/7hmh-1-jpg.html

Hat jemand eine Idee, was ich falsch mache?

mfg jojoho
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.07.2008, 17:42
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Hast du mal nen online-beispiel wie es eigentlich aussehen soll??
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.07.2008, 17:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 16
jojoho befindet sich auf einem aufstrebenden Ast
Standard

So sollte es eigentlich aussehen:
Angehängte Grafiken
Dateityp: jpg eigentlich.jpg (13,8 KB, 12x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.07.2008, 18:11
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Bild vom Navi richtige Größe??
Auch wenn die Höhen vom Rechten und vom Linken Block gleich groß sind, so verkleiner doch einfach mal die Höhe des Contents.

Ebenfalls empfehle ich dir alle Bilder ohne verlauf auf einen Pixel Höhe oder Breite zu verkleinern und dann zum Spiegeln. Also... als Beispiel mal den Header:

Code:
#header_top {
    font-size:7pt;
    background:url('img/_1.png') repeat-x;
    margin: 0 0 0 0;
    text-align:right;
    width:800px;
    height:168px;
    }
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 20.07.2008, 18:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 16
jojoho befindet sich auf einem aufstrebenden Ast
Standard

Wie meinst du das mit dem Bild von Navi richtige Größe?

Wenn ich die Höhe des Contents verkleinere dann ändert sich eigentlich nicht viel an dem Problem.
Es geht um diese komische Lücke, die zwischen TOP Navi und Content ist. ca 20 px groß. Hab nochmal eine Grafik mit angehängt.

Das mit dem Bilder kacheln ist klar, so machts kein sinn, das sind aber auch nur Platzhalter, daher keine x-kachelung.

mfg und Danke für alle Antworten bis jetzt, jojoho
Angehängte Grafiken
Dateityp: jpg lücke.jpg (47,8 KB, 6x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 20.07.2008, 18:24
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

ok, sorry... mein fehler...

Kann es sein, dass das Bild von Navi Top nicht so groß ist wie der div? dann könntest du einfach den div kleiner machen und es sollte klappen... leider kann ich aber nur raten, weil ich kein Onlinebeispiel habe.... Mit wäre es einfacher
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 20.07.2008, 18:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 16
jojoho befindet sich auf einem aufstrebenden Ast
Standard

Vielen dank für deine Hilfe!
Wenn es dir so viel Hilft, dann sollt du eins bekommen

Klick mich!

mfg jojoho
Mit Zitat antworten
  #8 (permalink)  
Alt 20.07.2008, 19:38
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Hi, ja es hat sehr geholfen.
Ich habe mal ein bisschen was geändert und dir das Template neu hochgeladen. Ich hoffe das ist nciht schlimm, aber ich glaube nun ist alles wie es aussehen soll.

Das div von navi_top war zu groß in der höhe und so wurde alles nach unten bewegt. Eventuell musst du die Größe mit den Originalbildern noch einmal anpassen.
Ich habe auch mal die float's in der rechten Spalte durch ein Margin ersetzt. Kannst du bei Bedaf wieder ändern.

Die neue Version findest du hier: Klick mich

Einfach den Quelltext kopieren. Ist alles noch von dir.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #9 (permalink)  
Alt 20.07.2008, 20:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 16
jojoho befindet sich auf einem aufstrebenden Ast
Standard

Wow, vielen dank für deine Tolle Hilfe, machnchmal sieht man den Wald vor lauter Bäumen nicht.

Ein kleine Frage noch: Warum hast du das mit den Margins gelöst, gibt es da einen bestimmten Grund der Wissenswert ist, um die Margin-Methode z.b Float vorzuziehen?

Vielen Dank nochmal,
mfg Jojoho
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.07.2008, 23:16
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Hey kein Problem

Der einzige Grund, den das ganze hat ist da eigentlihc nur, dass man das margin besser ausrichten kann als das float. du brauchst halt nur den abstand zu ändern als zum beispiel bilder, wenn der kunde doch auf einmal ne lücke zwischen navi und content haben will ^^ aber sonst gibt es keinen grund
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS layout problem donky CSS 5 05.06.2009 17:56
layout mit css - problem xxlcss CSS 1 30.12.2005 03:25
problem ausrichtung grafik und rand (css layout) celine@23 Barrierefreiheit 1 28.12.2005 14:05
css layout problem mit 3 zentrierten div´s horst CSS 5 19.08.2005 10:34
includes bei css layout dan CSS 2 10.03.2004 19:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:51 Uhr.