zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV-Layout - Prozent und Pixel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.11.2009, 17:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2004
Beiträge: 4
Flucker befindet sich auf einem aufstrebenden Ast
Cool DIV-Layout - Prozent und Pixel

Hallo Leute,

ich habe ein 3 Spalten DIV Layout.

z.B.:
Code:
################################
#      #                #      #
# Info #     Inhalt     # Info #
#   A  #                #   B  #
################################
Ausgangspunkt:
- Info A und Info B sind beide 20% breit aber mindestens 200px breit.
- Inhalt ist 58% breit

Problem:
Wenn das Browser Fenster in der Breite verkleinert wird und Info A und Info B haben die Breite von 200px erreicht, darf sich der Inhalt nicht mehr an seine Prozentangabe 58% halten, sondern von nun an muss die reduzierte Breite des Browser Fenster zu 100% vom Inhalt DIV entnommen werden, da Info A und Info B nicht weiter verkleinert werden dürfen.
Derzeit überlappen sich die drei DIVs wenn Info A und Info B nicht mehr verkleinert werden.

Bisher konnte ich das nur mit einem Tabellen Layout erreichen.

Meine Frage an Euch kann das überhaupt durch ein DIV realisiert werden und wenn ja wie?

Viele Grüße
Flucker
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.11.2009, 18:13
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

schreib A und B zuerst in den Quelltext und lass die floaten.

Dann kommt Inhalt in den Quelltext, bekommt keine Breite und ein entsprechendes rechtes/linkes margin.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.11.2009, 12:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2004
Beiträge: 4
Flucker befindet sich auf einem aufstrebenden Ast
Standard

Hallo Klaus,

Vielen Dank für Deine Antwort.

Hier ist der aktuelle Stand:

HTML-Code:
<html>
<head>
<style type="text/css">
	div { border: solid 1px #000; height: 500px; margin: 5px; }
	#info_a { float:left; width:20%; min-width: 200px; }
	#info_b { float:right; width:20%; min-width: 200px; }
	#inhalt { float:left; }
</style>
</head>

<body>
<div id="info_a"><img src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="135" height="155"></div>
<div id="info_b"><img src="http://upload.wikimedia.org/wikipedia/de/b/bc/Wiki.png" width="135" height="155"></div>
<div id="inhalt">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
</body>
</html>
Was soll ich denn beim DIV Inhalt als margin eintragen?
Prozent angaben gehen ja nicht, da ich mit min-width arbeite.

Viele Grüße
Flucker
Mit Zitat antworten
  #4 (permalink)  
Alt 05.11.2009, 12:41
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Flucker Beitrag anzeigen
Was soll ich denn beim DIV Inhalt als margin eintragen?
Prozent angaben gehen ja nicht, da ich mit min-width arbeite.
stimmt.
In diesem Fall ist wohl eine feste Breite nötig, damit der Inhalt sich dazwischenquetschen kann.

was ich noch vergaß: #inhalt floatet nicht.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 05.11.2009, 14:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2004
Beiträge: 4
Flucker befindet sich auf einem aufstrebenden Ast
Standard

Nunja, ist schon irgendwie seltsam, das man für das Layout keine Tabelle verwenden soll/darf, es jedoch für das DIV Layout in diesem Fall keine äquivalente alternative gibt

Viele Grüße
Flucker
Mit Zitat antworten
  #6 (permalink)  
Alt 05.11.2009, 14:48
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

du solltest vielleicht auch bedenken das dein geplantes Layout auf einem der extrabreiten Bildschirm nicht so toll rüberkommt.

Der mittlere Bereich hat dann mit Sicherheit eine viel zu große Zeilenlaufweite, was dann sehr mühsam zum Lesen ist.

Um das mit den Bildschirmen etwas auszugleichen kannst du z.B. die Gesamtbreite deiner Site mit min-width/max-width variabel machen.

Hier mal ein Beispiel eines Layouts von Stu Nicholls
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
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
Untermenü im IE nici CSS 10 22.06.2009 22:19
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12
Layout Problem mit div box powerpika CSS 8 16.12.2006 13:36
3 Pixel margin-problem bei 2-spalten layout. schaf CSS 5 16.06.2005 22:02
3 Spaltiges Layout im zentrierten DIV synomus CSS 16 09.01.2004 16:06


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