zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abstand zwischen Sidebar-Container (links) und Content-Container (rechts)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.11.2016, 22:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.11.2016
Beiträge: 2
Jeyla befindet sich auf einem aufstrebenden Ast
Rotes Gesicht Abstand zwischen Sidebar-Container (links) und Content-Container (rechts)

Hi liebe Community,

ich bin schon seit Tagen kläglich dabei folgendes Problem zu lösen

Hier der Link zu meiner Roh-Website: Kroatien

Ich habe das Problem farbig markiert:
Der rote, linke Container soll links floaten und der blaue, rechte Container soll rechts von dem linken Container sein, so wie es jetzt auch ist, aber ohne den Abstand zwischen beiden Containern.

Bisher habe ich folgendes probiert:
margin, padding, floaten, clear

Entweder habe ich die Eigenschaften falsch angewendet oder ich übersehe etwas.

Es wäre toll, wenn mir jemand helfen könnte.

Vielen Dank vorab

Jeyla
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.11.2016, 23:21
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:
ich übersehe etwas
Ja, die width Angabe.

Zunächst musst du die zur Verfügung stehende Breite herausbekommen. Die ist im übergeordneten Container .site definiert und ändert sich je nach Fensterbreite. Da kein padding angegeben ist steht sie voll zur Verfügung.

Für den untergeordneten Container .site-content sind weder width, noch padding, noch border noch margin festgesetzt. Dass sind die vier Werte, die den zur Verfügung stehenden Platz bestimmen.

Der jetzt untergeordnete Container .wrapper hat ein padding, welches je nach Fensterbreite variiert.

Jetzt folgen die beiden betroffenen Container .site-main und .sidebar.

Unter denen musst du die verbleibende Breite aufteilen und je nach Fensterbreite, und damit der grade aktiven Media Query, Werte vergeben.

Ein Beispiel aus deiner Seite:

Wenn .site 1200px breit ist und .wrapper ein seitliches padding von zwei mal 20px hat verbleiben 1160px für die beiden inneren Container.

Wenn .site-main eine Breite von 840px hat und weder padding, noch border, noch margin verbleiben für .sidebar noch 320px.

.sidebar hat ein padding von 2 mal 20px, kein border und kein margin. Verbleiben für die Breite (width) 280px.

Damit stünden die beiden Container ohne Abstand nebeneinander.

Das musst du jetzt für jede Änderung der Media Queries durchgehen und die Werte so anpassen, dass die beiden inneren Container immer den kompletten zur Verfügung stehen Platz ausfüllen.

Es gibt noch Möglichkeiten die Berechnung anders zu handhaben. Stichworte: Box-Modell oder CSS-calc. Und statt float kann auch Flexbox verwendet werden, dass hat aber nur indirekt mit der Berechnung zu tun. Das aber zunächst nur als Hinweise, ich will dich nicht zu sehr verwirren und gehe deshalb nicht näher darauf ein.

Gruss

MrMurphy

Geändert von MrMurphy (14.11.2016 um 23:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.11.2016, 23:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.11.2016
Beiträge: 2
Jeyla befindet sich auf einem aufstrebenden Ast
Idee Riesen Dank an MrMurphy

Hey MrMurphy,

wo soll ich die Packung Merci-Schokolade hinschicken?!

Dank deiner Hilfe habe ich es hinbekommen. Ich habe es genau entsprechend deinen Anweisungen gemacht. Doch zu Beginn stellte sich nicht der erwünschte Erfolg ein. ".site-main" hatte sogar "width", aber das hatte keine Auswirkungen auf die Breite. Deswegen habe ich nochmal recherchiert, wo die 820px Breite vorgegeben sind und es war bei "#main". Ich habe die Breite für "#main" angepasst und nun ist der Abstand weg. Eigentlich ein primitives Problem , aber so wie du das geschildert hattest, habe ich meine Website noch gar nicht betrachtet gehabt. Riesen Dank dafür.

Mit Zitat antworten
Antwort

Stichwörter
abstand, container, float, ungewohlt

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
Content wächst nicht mit Sidebar mit mutilate CSS 7 02.04.2010 10:23
Dynamische Höhe im Content und DIV immer unten keaton CSS 8 13.12.2006 19:19
Tabelle richtet sich links und rechts im COntainer aus... 18inch CSS 7 10.04.2005 11:55
text links und bild rechts in einem container / p / span ? Holger (HMR) CSS 4 20.02.2005 14:23
Elemente in einem Div Container links & rechts ausrichte oliwa CSS 8 16.07.2004 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:56 Uhr.