zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Width und float:right

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.02.2016, 15:02
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard Responsive Width und float:right

Hallo Zusammen

Ich habe ein Problem beim Layouten einer Website.
Ich wollte den Inhalt gerne "responsive" machen. Heisst, ich möchte, dass sich der bereich, wo der Text ist und der Bereich rechts sich der grösse des Browserfensters Anpasst.

Nun bringe ich das irgendwie nicht hin, dass ich, wenn ich rechts am Inhalt einen Block fliessen lasse ich den Hauptteil flexibel habe.

Momentan sieht das so aus: jsfiddle.

Mein CSS Code:
Code:
.content {
	float: left;
	width: 70%;
	
	margin: 20px;
	padding: 20px;
  
	border: 1px solid;
}

aside {
	display: block;
	overflow: hidden;
	float: right;
	
	width: 10%;
	min-width: 100px;

	margin: 20px;
	padding: 0 20px 10px;
	
	border: 1px solid;
}
aside h2 {
	border-bottom: 1px solid;
}
Was für Vorschläge habt ihr hier?

Danke und Gruss
Toby
__________________

Nyaa~~
------------------------------------------
http://www.codestyle.ch
------------------------------------------
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.02.2016, 18:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Grundsätzlich sollten die Container in einer Reihe alle in die gleiche Richtung floaten. Wenn gefloatet wird muss auch gecleart werden.

Zu deinem Problem:

Die nebeneinanderstehenden Container dürfen nicht breiter als 100% werden.

Um das zu erreichen gibt es zwei grundsätzliche Möglichkeiten:

1. Alle Angaben die Breite betreffend (width, padding, border-width, margin) werden mit der Einheit Prozent angegeben. Dann kannst du das direkt sehen.

2. Oder du benutzt calc und berechnest damit die Breitenangaben.

Die Breitenberechnungen können vereinfacht werden wenn du zudem das Border-Box-Modell verwendest. Dann brauchst du dich nur um width und margin zu kümmern. padding und border-width werden automatisch vom width abgezogen.

Statt float ist grade für solche Darstellungen aber Flexbox besser geeignet.

Gruss

MrMurphy

Geändert von MrMurphy (14.02.2016 um 20:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.02.2016, 01:46
Benutzer
neuer user
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo

1. Alle Angaben die Breite betreffend (width, padding, border-width, margin) werden mit der Einheit Prozent angegeben. Dann kannst du das direkt sehen.
border-width kann nicht in Prozent angegeben werden.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.02.2016, 16:26
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von axelf Beitrag anzeigen
border-width kann nicht in Prozent angegeben werden.
Heisst für mich die einzigen Möglichkeiten sind:
  1. Berechnen mit calc
  2. Width fix einstellen.

Gibt es noch weitere Möglichkeiten (Preprocessors ausgeschlossen)?

Danke und Gruss
Toby
__________________

Nyaa~~
------------------------------------------
http://www.codestyle.ch
------------------------------------------
Mit Zitat antworten
  #5 (permalink)  
Alt 21.02.2016, 16:42
Benutzer
neuer user
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

Was willst du denn machen? Unter dem Link das Beispiel funktioniert doch oder was ist dort falsch?
Mit Zitat antworten
  #6 (permalink)  
Alt 21.02.2016, 17:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Gibt es noch weitere Möglichkeiten
Ja, das Border-Box-Modell. Oder du verwendest Flexbox. Oder beides zusammen.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 21.02.2016, 17:54
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo



Ja, das Border-Box-Modell. Oder du verwendest Flexbox. Oder beides zusammen.

Gruss

MrMurphy
Meinst du das?
Code:
box-sizing: border-box;
Ehrlich gesagt kannte ich das bisher noch gar nicht...

Ich informiere mich gleich mal darüber und gebe bescheid, wenn ich's geschafft habe!

Danke dir!

@axelf: Mach mal das Browser-Fenster kleiner bei meiner Demo, dann siehst du was ich meine.
__________________

Nyaa~~
------------------------------------------
http://www.codestyle.ch
------------------------------------------
Mit Zitat antworten
  #8 (permalink)  
Alt 21.02.2016, 18:00
Benutzer
neuer user
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

Hi,

wenn der Platz nicht mehr ausreicht, springt der Container unter den Inhalt. In deinem Beispiel passiert das ja eh erst sehr spät und ich würde dann diesen Bereich generell unter dem Hauptinhalt anordnen. Wenn die Spalte zu klein ist, macht es ja eh keinen Sinn sie rechts zu behalten.

Aber probier mal border-box aus, das wird deine Probleme lösen.
Mit Zitat antworten
  #9 (permalink)  
Alt 21.02.2016, 18:16
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard

Okay, mit Border Box funktioniert das soweit, aber leider nur ohne Margin!

Beispiel ohne Margin

Beispiel mit Margin

Die einzige Möglichkeit, die ich hier sehe, wäre eine dritte "mittlere"-Box zu floaten.

z. B. so:

Links: 70%
Mitte: 10%
Rechts: 20%

Der Mittlere Bereich wäre dann einfach eine leere Box.

Gibt es noch eine andere Möglichkeit das zu lösen?
__________________

Nyaa~~
------------------------------------------
http://www.codestyle.ch
------------------------------------------
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.02.2016, 18:35
Benutzer
neuer user
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

Bei deinem Beispiel ohne margin könntest du ja dem content nur 70% der Breite geben und du hast wieder einen Abstand.
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
Problem mit CSS Menü FuFi CSS 1 05.01.2015 16:46
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
Media Querys - Layout geht wird über den Displayrand angezeigt DarkNemesis84 CSS 9 05.05.2013 23:00
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 19.09.2012 00:16


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