zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Design - dynamische Breite?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.02.2007, 16:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 4
RiChY befindet sich auf einem aufstrebenden Ast
Standard Design - dynamische Breite?

Hallo,

das ist erst mein zweites Projekt (das erste ziemlich simpel), das ich per divs und CSS usw. umsetze. Doch jetzt habe ich ein Problem, hierum geht es:

***

Ich habe einen Div "Koerper", in das die Divs "Head", "Content" und "Foot" kommen. Das Design (also "Koerper") hat eine fixe Breite, sagen wir 910px. Soweit kein Problem. Doch es soll außerdem möglich sein, dass, wenn im Contentbereich ein Bild von 1600x1200er Größe voll angezeigt wird, das komplette Design sich dieser Breite anpasst. "Head" und "Foot" sollen sich also dynamisch der Breite von "Koerper" anpassen (auch bei übergroßem Content).

Das tut es allerdings nicht. Im FireFox (2.0.1 / 2.0.2) steht der zu breite Content einfach über und das Design rührt sich nicht. Im Internet Explorer 6 Geht nur "Koerper" mit und passt sich der Breite an, die "Head"-Div allerdings rührt sich nicht.

Verdammt, woran liegt das?

Hier mal der Code (Seite)
Code:
<!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>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>GamingMedia.de</title>
	    <link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" language="javascript" src="main.js"></script>
	</head>

<body>
	<div class="koerper">
		<!-- HEAD START -->
		<div class="head">
			<a href="index.html" target="_self"><img src="gr/lay/logo.jpg" id="logo" border="0" alt="GamingMedia.de" /></a>
			<div class="righttopnav"><img src="gr/lay/topnavstart.jpg" alt="" /><a href="#"><img src="gr/lay/topnav_6_1.jpg" border="0" alt="" /></a><a href="#"><img src="gr/lay/topnav_5_1.jpg" border="0" alt="" /></a><a href="#"><img src="gr/lay/topnav_7_1.jpg" border="0" alt="" /></a><a href="#"><img src="gr/lay/topnav_4_1.jpg" border="0" alt="" /></a><a href="#"><img src="gr/lay/topnav_3_1.jpg" border="0" alt="" /></a><a href="#"><img src="gr/lay/topnav_2_1.jpg" border="0" alt="" /></a><a href="#"><img src="gr/lay/topnav_1_1.jpg" border="0" alt="" /></a></div>
			<div class="subnav">
				<a href="#" class="subnavchosen">News</a> | <a href="#" class="subnavclear">Reviews</a> | <a href="#" class="subnavclear">Previews</a> | <a href="#" class="subnavclear">Specials</a> | <a href="#" class="subnavclear">Trailer/Videos</a> | <a href="#" class="subnavclear">Galerien</a>
			</div>
		</div>
		<!-- HEAD END -->
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	</div>
</body>

</html>
CSS-Datei
Code:
body
{
	margin:0px;
	padding:0px;
	background-color: #585b52;
}
div.head
{
	width:100%;
	background:url(gr/lay/head.jpg);
	height:116px;
}
#logo
{
	float:left;
	position:relative;
	margin-left:10px;
}
div.righttopnav
{
	position:relative;
	top:60px;
	float:right;
}
div.subnav
{
	position:relative;
	top:61px;
	right:6px;
	float:right;
	padding-right:198px;
	font-family:trebuchet ms,verdana;
	font-size:11px;
	color:#3f3f3f;
}
div.koerper
{
	margin-right:auto;
	margin-left:auto;
	width:906px;
	background:#ffffff;
	border-left:solid 1px #ffcd03;
	border-right:solid 1px #ffcd03;
}
Vielen Dank schon mal für die Hilfe, bin als CSS-Neuling verzweifelt.

Grüße
Ricardo

Geändert von RiChY (26.02.2007 um 23:23 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.02.2007, 16:50
übermensch
neuer user
 
Registriert seit: 17.12.2006
Beiträge: 32
musmus befindet sich auf einem aufstrebenden Ast
Standard

würde eine wrapperdiv um das ganze setzten mit x-repeat bg, den dann auf 100% breite setzen

dann in diesem container die anderen elemente mit float positionieren..
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.02.2007, 17:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 4
RiChY befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Danke erstmal für den Tipp. Allerdings fehlt mir gerade ein wenig die Ahnung, wie genau Du das meinst, könntest Du das vielleicht mal oben am Code zeigen?

Vielen Dank.
Mit Zitat antworten
  #4 (permalink)  
Alt 26.02.2007, 17:06
übermensch
neuer user
 
Registriert seit: 17.12.2006
Beiträge: 32
musmus befindet sich auf einem aufstrebenden Ast
Standard

head auf 100% breite, als x-bg dann das streckerbild.

dann eine head_left div bauen, die links floatet, mit dem logo drin
und eine head_right div bauen, mit dem menü/submenu drin, die rechts floatet
Mit Zitat antworten
  #5 (permalink)  
Alt 26.02.2007, 18:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 4
RiChY befindet sich auf einem aufstrebenden Ast
Standard

Hi,

das funktioniert leider nicht wirklich. Irgendwas verhindert im FF, dass "Koerper" von seinen festgelegten 906px Breite abrückt und breiter wird. Der IE macht das noch, aber der Kram darin dann... ich verzweifel noch an so einem eigtl. simplen Kram. Das sind Momente, da wünscht man sich die simple Tabellenstruktur
Mit Zitat antworten
  #6 (permalink)  
Alt 26.02.2007, 18:42
übermensch
neuer user
 
Registriert seit: 17.12.2006
Beiträge: 32
musmus befindet sich auf einem aufstrebenden Ast
Standard

koerper? lass den kram doch weg, das bringt nichts, bau doch nicht 100 divs ineinander!
Mit Zitat antworten
  #7 (permalink)  
Alt 26.02.2007, 23:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 4
RiChY befindet sich auf einem aufstrebenden Ast
Standard

Ok,

habe es leider unsauber machen müssen, ging nicht anders.

Neues Problem:

Contentbereich... 3 Spalten, linker Contentteil, mittlerer Contentteil und rechts dann Werbung.

Also 3 divs. Die linke float:left; die rechte float:right; und die mittlere gar kein float. Jetzt floatet allerdings der Content (verständlicherweise) aus der mittleren Spalte um die linke Spalte. Aber die Spalten müssen getrennte Bereiche sein. Bei einer Tabelle wäre es da einfach

<td>content left</td><td>content middle</td><td>advert</td>

Aber bei meiner CSS-"Lösung" funktioniert das nicht. Wie lässt sich das umsetzen? Diese Spalten sollen (bis auf die rechte, das ist aber eher nebensächlich) FIXE Breiten haben (wurde so entschieden). Wie vereine ich das? Ich habe da einfach versucht, den divs Breiten zuzuweisen, das Ergebnis sieht man unten.

EDIT: Wie ich sehe, macht es der IE (Version 6) richtig, aber der FF (2.0.0.2) falsch.

Hierum geht es...

GamingMedia.de

HILFE

Geändert von RiChY (26.02.2007 um 23:42 Uhr)
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
Problem mit dynamische Breite Crys CSS 2 03.09.2009 13:44
2 Spalten - dynamische Breite Zeussi CSS 1 20.08.2009 12:29
Dynamische Breite amandine CSS 13 04.02.2008 16:12
Dynamische Layout Breite und Höhe altes-kind CSS 7 12.01.2007 12:54
overflow problem: IE dynamische breite vs FF anj CSS 9 12.10.2006 12:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:14 Uhr.