zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-Layout der Browsergröße anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.11.2008, 20:20
Jen Jen ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.11.2008
Beiträge: 8
Jen befindet sich auf einem aufstrebenden Ast
Standard CSS-Layout der Browsergröße anpassen

Hallo zusammen,

ich hab mal wieder ein Problem mit meinem CSS-Layout.

Ich möchte es gerne so anpassen das es in allen Browsern und in jeder Browsergröße gleich aussieht.

Auf meinem 20" Bildschirm mit Firefox passt das ganze. Ich möchte es aber so anpassen, das wenn man das Browserfenster verkleinert sich der Inhalt verschiebt und mitverkleinert.

Ich habe oben einen Kopf (Banner), links darunter die Navigation und rechts neben der Navigation der Inhalt.

Jedes mal wenn ich die Größe des Browserfensters verkleinere, wird die Navigation und Inhalt zu Einem. Es wird also alles verschoben.

Ich glaube es liegt daran, das kein automatischer Zeilenumbruch erzeugt wird.

Was mache ich falsch, bzw. was muss ich ändern.

Mein index und css sehen folgendermaßen aus:

index:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="./format.css">

</head>

<body>

  <div id="logo">
  <div id="links"><img src="./pics/links.jpg"></div>
  <div id="mitte"><img src="./pics/mitte.jpg"></div>
  <div id="rechts"><img src="./pics/rechts.jpg"></div>
 
  </div>


<div id="container">

	<div id="left">
Navigation
</div> 


	<div id="content">
	    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
	</div>
  
<div id="footer">Footer</div>
</div>

</body>
</html>
css:
Code:
body {
	font-family: Arial;
	color:#ffffff;
  background-color:#000000;
	padding:1em;
	margin:0;
}

/* ----------container zentriert das layout hintergrung-------------- */
#container {
	margin: 0;
	padding: 0;
	background-color: #000000;
  border: 1px; border-color:#ffffff; border-style: solid; 
  min-width:900px;
}

/* ----------banner for logo-------------- */
#logo[id]{
	margin: 0 0 1em;
	background-color: #000000;
  border: 1px; border-color:#ffffff; border-style: solid; 
  height:11.2em;
  min-width:900px;
}

div#links{
height:11.3em;
text-align:left;
float:left;
}

div#mitte{
height:11.3em;
margin-left:5em;
float:left;
}

div#rechts{
height:11.3em;
text-align:right;
float:right;
}

/* -----------------Inhalt--------------------- */
#content{
	float: left;
	min-height:800px;
	padding: 1em 2.5em;
	margin: 0;
  width:50em;
  border-left: 1px; border-color:#ffffff; border-style: solid; 
  border-right:0;
  border-bottom:0;
  border-top:0;
}

/* --------------left navigavtion------------- */
#left{
	float: left;
	width: 19em;
	margin: 0;
	padding: 0;
	color:#ffffff;
  min-height:600px;	
}

/* -----------footer--------------------------- */
#footer {
	clear: left;
	padding: 0;
	margin: 0;
	margin-left: 19em;
  border-left: 1px; border-color:#ffffff; border-style: solid; 
  border-right:0;
  border-bottom:0;
  border-top:0;
}
Ich bitte um Hilfe!

Lg Jen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.11.2008, 22:56
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Du hast min-width in px drin, das verhindert das Schrumpfen in guten Browsern in gewissem Maß.

Auch em ist eine "feste" Größe, bezogen auf die Schriftgröße. Verwende Prozentangaben für ALLE Breiten wichtiger Container, wenn Du eine Anpassung an das Browserfenster willst. ( Klar, min-width geht trotzdem, dann ist das Design nur halbflexibel)
Dann allerdings musst Du aufpassen mit margin- und padding-Werten solcher Container. Gib margins und paddings lieber den innen liegenden Elementen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.11.2008, 22:40
Jen Jen ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.11.2008
Beiträge: 8
Jen befindet sich auf einem aufstrebenden Ast
Standard

So ich hab jetzt ma die breiten in %-Angaben geändert.

Leider geht es immer noch nicht.

Was meinst du genau mit den margin und padding? Was soll ich da ändern?


Mein css sieht nun folgendermaßen aus:
Code:
body {
	font-family: Arial;
	color:#ffffff;
  background-color:#000000;
	padding:1em;
	margin:0;
}

/* ----------container zentriert das layout-------------- */
#container {
	margin: 0;
	padding: 0;
	background-color: #000000;
  border: 1px; border-color:#ffffff; border-style: solid; 
  width:100%;
}

/* ----------banner for logo-------------- */
#logo[id]{
	margin: 0 0 1em;
	background-color: #000000;
  border: 1px; border-color:#ffffff; border-style: solid; 
  height:11.2em;
  min-width:900px;
}

div#links{
height:11.3em;
text-align:left;
float:left;
}

div#mitte{
height:11.3em;
margin-left:5em;
float:left;
}

div#rechts{
height:11.3em;
text-align:right;
float:right;
}

/* -----------------Inhalt--------------------- */
#content{
	float: left;
	min-height:800px;
	padding: 1em 2.5em;
	margin: 0;
  width:60%;
  border-left: 1px; border-color:#ffffff; border-style: solid; 
  border-right:0;
  border-bottom:0;
  border-top:0;
}

/* --------------left navigavtion------------- */
#left{
	float: left;
	width: 19em;
	margin: 0;
	padding: 0;
	color:#ffffff;
  min-height:600px;	
}

/* -----------footer--------------------------- */
#footer {
	clear: left;
	padding: 0;
	margin: 0;
	margin-left: 19em;
  border-left: 1px; border-color:#ffffff; border-style: solid; 
  border-right:0;
  border-bottom:0;
  border-top:0;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 14.11.2008, 09:39
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ich gebe Dir mal ein ganz einfaches Beispiel für ein veränderliches Layout abhängig von der Browserfenstergröße bzw. -breite ( liquid Layout)

HTML-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="de" lang="de">

<head>
    <title>liquid 3 columns</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
<style type="text/css"><!--

* {
    margin: 0;
    padding: 0;
}

#wrapper {
width: 80%;
margin: 0 auto;
color: #000;
background-color: #333;
}
#lnavi {
float: left;
width: 20%;
min-height: 500px;
background-color: #aaa;
/*padding-left: 30%; */

}
#rnavi {
float: right;
width: 20%;
min-height: 500px;
background-color: #ddd;
}
#content {
    margin: 0 20%;
    background-color: #cc0;
    min-height: 100%   ;
    width: 60%;
}
#footer {
    height: 5em;
    background-color: #ff0;
    width: 100%;
    clear: both;
    margin-bottom: -5em;
}

 --></style>
</head>

<body>
<div id="wrapper"><div id="lnavi"><p>lnavi</p></div><div id="rnavi"><p>rnavi</p></div><div id="content"><p>content</p></div><div id="footer"><p>footer</p></div></div>
</body>
</html>
Daran sollte der Mechanismus deutlich werden. Wenn Du jetzt einem der Container wie in lnavi von mir gesetzt aber noch auskommentiert, ein padding mitgibst, wird lnavi breiter und beansprucht Platz auf Kosten anderer Container. ( Hier würde content überlagert)
Deshalb meine ich, dass es besser ist, padding und margins (zum Beispiel, um Textabsätze oder Bilder zu positionieren) den jeweiligen Absätzen oder Bildern mitzugeben als dem umgebenden Container.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Antwort

Stichwörter
browsergröße, css, layout

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 Komplex yanu CSS 0 01.04.2009 21:27
CSS Layout für Fortgeschrittene StefanE CSS 2 15.01.2009 08:39
Joomla und CSS Layout ohne Tabellen ... MoYo CSS 2 15.02.2007 11:19
CSS Layout - ist das so möglich? berlina CSS 18 12.02.2007 22:55
Layout Problem CSS david.bellem CSS 8 17.09.2004 12:59


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