zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Lücken wenn Inhalt eines DIVs zu groß

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.09.2006, 15:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.09.2006
Beiträge: 2
Takeliner befindet sich auf einem aufstrebenden Ast
Rotes Gesicht Lücken wenn Inhalt eines DIVs zu groß

Hallo erstmal an alle,

ich habe ein Problem. Mir wurde geraten endlich doch mal Abstand von meinen Tabellenlayouts auf meiner Webseite zu nehmen. Also habe ich mich mal daran versucht, mein Design ohne Tabellen unterzubringen.

Ich hatte vorher meine Webseite "mitwachsen" lassen, wenn im Hauptteil mal ein längerer Text war. Dies hatte ich dann mit background-repeat gemacht. Allerdings habe ich jetzt bei den DIVs das Problem, dass wenn überhaupt die Divs mit der sich wiederholenden Grafik sich unterhalb des Inhalts befinden. Ich habe das ganze mal hochgeladen, ich denke damit wird klarer was ich meine:
http://takeliner.de/problem/new/index.html

Ich hätte gerne, dass die divs leftrepcol und rightrepcol jeweils links und rechts nebem dem hauptteil sind und dort von oben nach unten sich über 100% strecken und das background-image wiederholen. Könnt ihr mir helfen? Mir fällt es schwer nachzuvollziehen warum die dinger darunter sind und nicht daneben.

Hier meine CSS:
Code:
html, body{ 
margin:0; 
padding:0; 
text-align:left; 
} 

#pagewidth{ 
width:684px;
text-align:left;
} 

#header{
width:684px;
height: 41px;
background-image: url(../website/jpg/top.jpg);
width:100%;
} 

#leftcol{
width:206px;
height:382px; 
float:left; 
position:relative; 
background-image: url(../website/jpg/links.jpg);
}

#maincol{
text-align: left;
width:434px;
background-color: #FFFFFF;  
float: left; 
position: relative; 
}

#rightcol{
width:44px;
height:382px; 
float:left; 
position:relative; 
background-image: url(../website/jpg/rechts.jpg);
}

#leftrepcol{
width:206px;
float:left;
position: relative;
background-image: url(../website/jpg/wiederhol_links.jpg);
background-repeat: repeat-y;
}

#centerrepcol{
width:434px;
float:left;
background-color:FFFFFF;
}

#rightrepcol{
width:44px;
float:left;
position:relative;
background-image:url(../website/jpg/wiederhol_rechts.jpg);
background-repeat:repeat-y;
}

#footerl{
height:56px; 
width:206px;
float:left;
background-image:url(../website/jpg/unten_links.jpg);
} 

#footerm{
height:56px;
width: 434px;
float: left;
background-image: url(../website/jpg/unten.jpg);
}

#footerr{
height:56px;
width: 44px;
float: left;
background-image: url(../website/jpg/unten_rechts.jpg);
}
Mein HTML-Quellentext:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>CssCreator-->XHTML 1.0 Strict standard template </title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="www.csscreator.com" />
<link rel="stylesheet" href="201746331.css" type="text/css" />
</head>
<body>
<div id="pagewidth" >
	<div id="header" ></div>
	<div id="leftcol" ></div>
	<div id="maincol" >
	INHALT
	</div>
	<div id="rightcol" ></div>
	<div id="leftrepcol" ></div>
	<div id="centerrepcol" ></div>
	<div id="rightrepcol" ></div>
</div>
<div id="footerl" ></div>
<div id="footerm" ></div>
<div id="footerr" ></div>
</body>
</html>
Ich möchte mich schonmal im Vorraus bei euch bedanken. Ich blicke da einfach noch nicht durch, verzeiht mir das bitte.

Mit Freundlichem Gruß
André
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.09.2006, 15:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Einen druchgehenden Hintergrund bekommst du, wenn du in das alles einschließende Element #pagewidth *eine* gekachelte Hintergrundgrafik legst.
Siehe CSS-FAQ Punkt 1.
Damit der alles umgebende Container mit seinem Inhalt wächst braucht dein Gefloate noch ein clear.
Siehe FAQ Punkt 2.

--

Leere Elemente für Hintergrundgrafiken brauchst du überhaupt nicht - entferne sie.
Zeichne zuerst deine Inhalte mit semantisch sinnvollem Markup aus.
Bsp: Welchen Inhalt bekommt "header"? Ist das nicht eher eine h1-Überschrift.
usw.

Wenn du das hast, dann überleg dir, in welchen der vorhandenen Elemente du deine Hintergrundbilder unterbringst. Die Zerschnipseleien in rechts/links/mitte sind unnötig. Du denkst in Tabellenzellen - das musst du dir abgewöhnen.
Bsp: warum hast du den footer in drei Teile zerschnipselt?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.09.2006, 18:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.09.2006
Beiträge: 2
Takeliner befindet sich auf einem aufstrebenden Ast
Standard

Ich habe versucht mich vom dem Tabellengedanken zu lösen. Ich weiss dass es mir noch lange nicht gelungen ist und ich noch einen weiten Weg vor mir habe, aber ich wollte mal erfragen, ob ich wenigstens auf dem richtigen Weg bin.
Zumindest im IE sieht die Webseite jetzt wie gewollt aus, im Firefox allerdings noch nicht. Soweit ich recherchiert habe, hängt es mit dem clear: zusammen, nur habe ich (noch) nicht begriffen wie/wo/weshalb ich da was einsetzen muss.(Das wird also eine seeeehr lange Nacht )

Hier mal mein derzeitiger Stand:
http://www.takeliner.de/problem/0/

Die jetzige Version habe ich durch recherchen und größtenteils durch simples ausprobieren hinbekommen. Wie gesagt im IE sieht es bei mir aus wie gewünscht. Nur im Firefox schießt der Text über den Footer hinaus und auch das Menü ist noch etwas unpässlich. Mein derzeitiger wissenstand ist, dass ich entweder den code 100% validieren muss oder mit einem CSS Wechsel je nach Browser arbeiten muss.

Ich möchte mich nochmal bei fricca für die Denkanstöße bedanken!

Edit: Im Firefox sieht die Seite jetzt auch wie gewollt aus!

CyA Takeliner

Geändert von Takeliner (16.09.2006 um 19:21 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.09.2006, 19:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Absolute Positionierung und float beim selben Element geht nicht - float ist dann wirkungslos.
Wenn du die Navigation abs. positionierst, dann brauchst du auch kein clear.
Es ist so aber *nicht* möglich, dass sich #pagewidth mit der Navigationsleiste ausdehnt, wenn diese länger ist als der Inhaltsbereich.

Du darfst keine festen Höhen angeben (#maincol!), wenn du möchtest, dass sich ein Element mit seinem Inhalt ausdehnt. Der IE macht das falsch.
Wenn du eine Mindesthöhe willst, dann nimm min-height (height *nur* für IE).

Die absolute Positionierung von html, body ist völlig unnötig. Weg damit. Wenn du einen Abstand von links willst, dann gib z.B. body ein padding.

Zitat:
Die jetzige Version habe ich durch recherchen und größtenteils durch simples ausprobieren hinbekommen.
Hast du die FAQ durchgearbeitet? Da findest du ganz viel Information zu deinen Problemen.

Zitat:
Mein derzeitiger wissenstand ist, dass ich entweder den code 100% validieren muss oder mit einem CSS Wechsel je nach Browser arbeiten muss.
Nicht "entweder .. oder". Dein Code ist fehlerhaft.
Schau dir an, wie Listen aufgebaut sind (SELFHTML!).

Sonderbehandlung des IE ist mit CSS-Hack oder Conditional Comment möglich (Suchfunktion!).
Mit Zitat antworten
  #5 (permalink)  
Alt 17.09.2006, 10:56
Benutzerbild von LineMan
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.08.2006
Ort: Mülheim an der Ruhr
Beiträge: 211
LineMan befindet sich auf einem aufstrebenden Ast
Standard

wie schon in der FAQ steht kannst du für solche problemlösungen entweder http://www.yaml.de, oder das beispiel auf a list apart oder das hier benutzen... da musst du dich halt etwas mit beschäftigen.

http://www.css-tutorials.de/css/onem...umnlayout.html
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...
Mit Zitat antworten
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 der Browsergröße anpassen Jen CSS 3 14.11.2008 09:39
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 17:23
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 19:57
div box bekomme ich nett zentriert??? Hard@Bowl CSS 1 23.05.2005 12:22
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 13:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:00 Uhr.