zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.12.2008, 01:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2008
Beiträge: 8
Rilana befindet sich auf einem aufstrebenden Ast
Standard CSS dynamisches Layout Problem

Hallo alle zusammen. Bin grad an einem dynamischen CSS layout und schlage mich mit einem Problem rum.

Das ganze hat eigentlich einen Linken Teil und einen rechten Teil. Wenn man nun den Bildschirm verkleinert, dann sollte der rechte Teil sich verkleiner bis auf's minimum und dann aber stehen bleiben und nicht ans Ende der Seite rücken. Hier der Link für's bessere Verständniss Untitled Document

Wie krieg ich dass blos hin dass der rechte Teil rechts floated und der linke Teil links floated aber wenn es eng wird der rechte Teil auf's minimum geht und dann stehen bleibt und ein seitlicher scrollbalken erscheint?

css:
Code:
@charset "UTF-8";
body {
	background-image: url(pics/wandGanzBG.jpg);
	font-family: verdana;
	font-size: 13px;
	color: #FFF;
}
#full {
	width: 99%;
	height: 99%;
}
#logo {
	margin-left: 70px;
	float: left;
	width: 273px;
}
#sideNav {
	width: 210px;
	background-image: url(pics/blackBox.jpg);
	background-repeat: no-repeat;
	float: left;
	margin-top: 50px;
}
#contentbox {
	float: right; /* since this element is floated, a width must be given */
	width: 55%;
	padding-right: 70px;
}
#nav {
	text-align: left;
	margin-right: -50px;
}
#text {
	text-align: left;
	margin-top: 230px;
}
html:
HTML-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>Untitled Document</title>
<link href="styleNew.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="full">
<div id="logo">
logo
      </div>
 
  <div id="sideNav">
    <p>&nbsp;</p>
 
  </div>
  
  
</div>

<div id="contentbox">
<div id="nav">
<? include("topNav.html"); ?>
</div>

<div id="text">

 <h1>karte</h1>
    <p>Die Hauskarte ist für Jedermann-frau ab dem 28igsten Lebensjahr erh&auml;ltlich.<br />
Sie wird kostenlos abgegeben. Anmelden kann man sich nur direkt im Haus. Tags&uuml;ber in der Ladenstrasse und im Kafe , Abends im Klub und im Kafe. Sie ist nicht zu Verwechseln mit einer Klub Member Karte. Denn neben dem verg&uuml;nstigtem und problemlosen Einlass in den Klub und den w&ouml;chentlichen Newsletter bietet sie auch diverse Vorteile in der Ladenstrasse. Ein Stamm Rabatt von 10%, kostenlose &Auml;nderung der gekauften Jeans, Pre Sale vor dem offiziellen Ausverkauf und das Beste: ab 10 Personen bieten wir durch Anmeldung unter <a href="mailto:reservation@dashaus4.ch">reservation@dashaus4.ch</a> ein privates Night Shopping in der Ladenstrasse an.
</p>   
    <a href="anmeldung.php">Hauskarte anfordern</a>
</div>

</div>
</div>


</body>
</html>
Wäre wirklich froh wenn mir jemand einen Tipp geben könnte. Danke! Rilana
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.12.2008, 01:42
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du kannst z.B. body min-width geben - der IE < 7 versteht das zwar nicht, aber Abhilfe gibt's hier: Stu Nicholls | CSSplay | Min-Width for Internet Explorer
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.12.2008, 08:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2008
Beiträge: 8
Rilana befindet sich auf einem aufstrebenden Ast
Standard

Hy, danke für dein feedback, nee leider geht dass nicht, habe es im body versucht und im #full. Ich glaub ich muss das ganze wohl anders aufbauen, abur wie? es soll ja so sein dass das rechte rechts floating ist und das linke links floating.... wäre wirklich froh um jeden imput.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.12.2008, 12:51
{ 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

Ja, musst Du.

Wenn du ein halbwegs flexibles Layout haben willst, verzichte zunächst auf die margins und paddings in #logo und #contentbox. Browser können noch nicht richtig rechnen, aber dazu später mehr.

Du versuchst wohl die Seite zu zentrieren, das geht aber in #full besser mit einer festen Breite, die eh vorgibst und margin: 0 auto;

Dann gibst Du #logo und #contentbox jeweils eine min-width - nach Bedarf- und prozentuale Größen, z.B. 44% und 55% ( keine hundert insgesamt wegen Rundungsfehlern der Browser) in Bezug auf #full.
Das sollte für den Anfang reichen
__________________
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
  #5 (permalink)  
Alt 04.12.2008, 15:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2008
Beiträge: 8
Rilana befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine Tipps. Habe alles geändert. Doch leider jumpt die rechte Seite immernoch unter die linke Seite beim verkleinern des Browserfensters. Ich möchte einfach dass es bei min. stehen bleibt und dann der horizontale scrollbalken kommt... Untitled Document

Hier ist mein aktuelles CSS, vielleicht hab ich ja was falsch verstanden:
Code:
@charset "UTF-8";
body {
	background-image: url(pics/wandGanzBG.jpg);
	font-family: verdana;
	font-size: 13px;
	color: #FFF;
}
#full {
	width: 99%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#logo {
	float: left;
	width: 15%;
	min-width: 273px;
	max-width: 350px;
}
#sideNav {
	background-image: url(pics/blackBox.jpg);
	background-repeat: no-repeat;
	margin-top: 50px;
	float: left;
	width: 15%;
	min-width: 273px;
	max-width: 350px;
}
#contentbox {
	float: right; /* since this element is floated, a width must be given */
	width: 70%;
	max-width: 1000px;
	min-width: 320px;
}
#nav {
	text-align: left;
	margin-right: -50px;
}
#text {
	text-align: left;
	margin-top: 230px;
}
ul#navlist
{
	white-space: nowrap;
	margin-right: 0px;
	margin-bottom: 20px;
	float: right;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a {
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
}

#navlist a:link, #navlist a:visited
{
	color: #5A5B5D;
	background-color: #FFFFFF;
	text-decoration: none;
	font-family: Verdana;
	font-size: 90%;
}

#navlist a:hover
{
	color: #fff;
	background-color: #A7A9AC;
	text-decoration: none;
}
h1 {
	background-image: url(pics/titleBg.gif);
}
h1 {
	font-family: arial;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	background-repeat: repeat-x;
	height: 25px;
	text-indent: 10px;
	background-position: 10px;
	width: 570px;
	margin-top: 30px;
}
p {
	font-family: arial;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 19px;
} 
a {
	color: #000000;
	background-color: #FFFFFF;
	text-decoration: none;
	padding-right: 2px;
	padding-left: 2px;
}

a:hover {
	color: #FFFFFF;
	background-color: #23201F;
	padding-right: 1px;
	padding-left: 1px;
	text-decoration: none;
}
Wäre wirklich froh um einen Geistesblitz Danke, Rilana
Mit Zitat antworten
  #6 (permalink)  
Alt 04.12.2008, 15:52
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

Es ist das umgebende Element, das eine Mindestbreite braucht.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.12.2008, 15:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2008
Beiträge: 8
Rilana befindet sich auf einem aufstrebenden Ast
Standard

OK habe noch das probiert:
Code:
#full {
	width: 955px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
Dann funktioniert es zwar mit einmitten und mit Fenster verkleinern, aber dies hat nicht den Effekt den ich wünsche. Ich möchte dass wenn man das Fenster grösser macht die linke seite link floated und die rechte seite rechts floated.... der Text links sollte sich dynamisch verlängern oder verkürzen....

weist du was ich meine?
Mit Zitat antworten
  #8 (permalink)  
Alt 04.12.2008, 15:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2008
Beiträge: 8
Rilana befindet sich auf einem aufstrebenden Ast
Standard

Code:
#full {
	width: 99%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	min-width: 1000px;
}
Dies wäre das umgebene Element, aber so funktionierts auch nicht.
Mit Zitat antworten
  #9 (permalink)  
Alt 04.12.2008, 16:03
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

Dein Online-Code ist unverändert.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.12.2008, 00:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2008
Beiträge: 8
Rilana befindet sich auf einem aufstrebenden Ast
Standard

Hey cool, du hattest recht! Online gings dann!!! so geil! Es funktionierte im Dreamweaver nicht, da dachte ich geht eh nicht. Falsch gedacht! läuft einwandfrei! Danke dir vielmals!
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
Problem mit CSS Layout jojoho CSS 9 20.07.2008 23:16
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04
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


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