Habe Probleme mit CSS

Felix_Ach · 16. November 2016 um 12:12

Hallo, ich habe mich gerade angemeldet und auch gleich eine Frage!
Ich beschäftige mich erst seit Kurzem mit diesem Thema und habe daher wenig Erfahrung und Ahnung.
Nun meine Frage: Im unten stehenden Scrip wird das Hintergrundbild und die Container nicht variabel zur tatsächlichen Größe des Bildschirms dargestellt. Sprich, wenn ich den Bildschirm verkleinere, bleibt der Text starr bzw. der Hintergrund/ Container. Folge ist, wenn sich das Fenster verkleinert, ragt der Text rechts ins Leere bzw. auf weißen Hintergrund und man kann nicht mehr alles erkennen.
Ein Beispiel hierfür findet man hier: https://templated.co/assembly
Vielleicht kann mir jemand helfen!

html, body
{
	height: 100%;
}

body
{
	margin: 0px;
	padding: 0px;
	background: #f;
	font-family: 'Didact Gothic', sans-serif;
	font-size: 12pt;
	font-weight: 200;
	color: #FFF;
}


h1, h2, h3
{
	margin: 0;
	padding: 0;
}

p, ol, ul
{
	margin-top: 0;
}

ol, ul
{
	padding: 0;
	list-style: none;
}

p
{
	line-height: 180%;
}

strong
{
}

a
{
	color: #ee0000;
}

a:hover
{
	text-decoration: none;
}

.container
{
	overflow: hidden;
	margin: 0em auto;
	width: 1200px;
}

/********************************************************************************/
/ Image Style /
/********************************************************************************/

.image
{
	display: inline-block;
}

.image img
{
	display: block;
	width: 100%;
}

.image-full
{
	display: block;
	width: 100%;
	margin: 0 0 2em 0;
}

.image-left
{
	float: left;
	margin: 0 2em 2em 0;
}

.image-centered
{
	display: block;
	margin: 0 0 2em 0;
}

.image-centered img
{
	margin: 0 auto;
	width: auto;
}

/********************************************************************************/
/ List Styles /
/********************************************************************************/

ul.style1
{
}

ul.actions
{
}

ul.actions li
{
	display: inline-block;
	padding: 0em 0.50em;
}

/********************************************************************************/
/ Social Icon Styles /
/********************************************************************************/

ul.contact
{
	margin: 0;
	padding: 2em 0em 0em 0em;
	list-style: none;
}

ul.contact li
{
	display: inline-block;
	padding: 0em 0.30em;
	font-size: 1em;
}

ul.contact li span
{
	display: none;
	margin: 0;
	padding: 0;
}

ul.contact li a
{
	color: #000000;
}

ul.contact li a:before
{
	display: inline-block;
	background: #3f3f3f;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	text-align: center;
	color: #fff;
}

ul.contact li a.icon-twitter:before { background: #2DAAE4; }
ul.contact li a.icon-facebook:before { background: #39599F; }
ul.contact li a.icon-dribbble:before { background: #C4376B;	}
ul.contact li a.icon-tumblr:before { background: #31516A; }
ul.contact li a.icon-rss:before { background: #F2600B; }

/********************************************************************************/
/ Button Style /
/********************************************************************************/

.button
{
	display: inline-block;
	padding: 1em 2em 1em 2em;
	letter-spacing: 0.10em;
	margin-top: 2em;
	padding: 1.40em 3em;
	background: #2E4185;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1em;
	color: #fff;
}

.button-alt
{
	padding: 1em 2em;
	border-color: rgb(0,0,0,0.8);
	color: #FFF;
}

/********************************************************************************/
/ 4-column /
/********************************************************************************/

.box1,
.box2,
.box3,
.box4
{
	width: 235px;
}

.box1,
.box2,
.box3,
{
	float: left;
	margin-right: 20px;
}

.box4
{
	float: right;
}

/********************************************************************************/
/ 3-column /
/********************************************************************************/

.boxA,
.boxB,
.boxC
{
	width: 384px;
}

.boxA,
.boxB
{
	float: left;
	margin-right: 20px;
}

.boxC
{
	float: right;
}

/********************************************************************************/
/ 2-column /
/********************************************************************************/

.tbox1,
.tbox2
{
	width: 575px;
}

.tbox1
{
	float: left;
}

.tbox2
{
	float: right;
}

/********************************************************************************/
/ Heading Titles /
/********************************************************************************/

.title
{
	margin-bottom: 3em;
}

.title h2
{
	font-size: 2.7em;
}

.title .byline
{
	font-size: 1.3em;
	color: rgba(255,255,255,0.60);
}

/********************************************************************************/
/ Header /
/********************************************************************************/

#wrapper
{
	position: relative;
	padding: 5em 0em 7em 0em;
	background: #2E4185;
}

/********************************************************************************/
/ Header /
/********************************************************************************/

#header-wrapper
{
	position: relative;
	padding: 5em 0em 7em 0em;
	background: #fff url(images/header-bg.jpg) no-repeat center;
	background-size: cover;
}

#header
{
	position: relative;
	padding: 5em 0em;
}

/********************************************************************************/
/ Logo /
/********************************************************************************/

#logo
{
	position: absolute;
	top: 3.6em;
	left: 0;
}

#logo h1
{
	font-size: 2.6em;
	color: #2E4185;
}

#logo a
{
	text-decoration: none;
	color: rgba(255,255,255,1);
}

/********************************************************************************/
/ Menu /
/********************************************************************************/

#menu
{
	position: absolute;
	top: 4.5em;
	right: 0;
}

#menu ul
{
	display: inline-block;
}

#menu li
{
	display: block;
	float: left;
	text-align: center;
}

#menu li a, #menu li span
{
	padding: 1em 1.5em;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.8em;
	color: rgba(0,0,0,0.80);
}

#menu li:hover a, #menu li.active a, #menu li.active span
{
}

#menu .active a
{
	background: #2651a8;
	border-radius: 6px;
	color: rgba(255,255,255,1);
}

#menu .icon
{
}

/********************************************************************************/
/ Banner /
/********************************************************************************/

#banner
{
	padding-top: 10em;
	text-align: center;
}

#banner .title h2
{
	font-size: 4em;
}

#banner .title .byline
{
	font-size: 2em;
}

#banner .button
{
	margin-top: 2em;
	padding: 1.40em 3em;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1em;
	
}

.banner
{
	margin-bottom: 5em;
}

/********************************************************************************/
/ Page /
/********************************************************************************/

#page
{
}

/********************************************************************************/
/ Content /
/********************************************************************************/

#content
{
}

/********************************************************************************/
/ Sidebar /
/********************************************************************************/

#sidebar
{
}

/********************************************************************************/
/ Footer /
/********************************************************************************/

#footer
{
}

/********************************************************************************/
/ Copyright /
/********************************************************************************/

#copyright
{
	overflow: hidden;
	padding: 5em 0em;
	border-top: 1px solid rgba(255,255,255,0.08);
}

#copyright p
{
	text-align: center;
	font-size: 1em;
	color: rgba(255,255,255,0.3);
}

#copyright a
{
	text-decoration: none;
	color: rgba(255,255,255,0.6);
}

/********************************************************************************/
/ Welcome /
/********************************************************************************/

#welcome
{
	position: relative;
	padding: 7em 0em 7em 0em;
	background: #fff;
	background-size: cover;
	text-align: center;
}

#welcome .container
{
	width: 1000px;
	padding: 0px 100px;
	color: rgba(255,255,255,0.8);
}

#welcome a
{
	color: rgba(255,255,255,1);
}

#welcome .button
{
	background: #FFF;
	color: #2651a8;
}

/********************************************************************************/
/ Extra /
/********************************************************************************/

#three-column
{
	text-align: center;
	color: rgba(255,255,255,0.8);
}

#three-column .fa
{
	display: block;
	padding: 1em 0em;
	color: rgba(255,255,255,0.8);
	font-size: 2em;
}

#three-column .title h2
{
	font-weight: bold;
	color: rgba(255,255,255,0.8);
}

#three-column .title .byline
{
	text-align: center;
	color: rgba(255,255,255,.5);
}

Balmung · 16. November 2016 um 22:46

Dein .container hat 'ne feste breite von 1200px.

Felix_Ach · 17. November 2016 um 06:24

ah, vielen Dank!!!
Ich habe ihn nun auf 100% gesetzt… Muss ich nun mit “float” arbeiten, damit die Navigation bspw. immer rechts bleibt bzw. wenn der Bildschirm noch kleiner wird, in die nächste Zeile springt?

icatch · 17. November 2016 um 10:41

Ein kleiner Tipp, damit das ganze dynamischer für mobile Geräte wird:

#menu{
float:right; //alle anderen Befehle der ID menu entfernen (z.B. "position: absolute;")
}
#logo{
float:left; //alle anderen Befehle der ID logo entfernen (z.B. "position: absolute;")
}

Wenn jetzt das Menü bei kleinen Bildschirmen nicht Links-Bündig sein soll, sondern Rechts-Bündig, dann füge noch ein/ändere noch ab:

#menu li{
float: right;
}

Wenn du die maximale Breite nicht 100% haben willst, sondern weiterhin bei den 1200px bleiben willst, dann setzte den CSS für den .container auf “width:100%;max-width:1200px;”. Somit erhält der Container immer die 100% Breite bis zu einer maximalen Breite von 1200px.

Felix_Ach · 17. November 2016 um 11:33

Vielen Dank! Ihr seid super.

Felix_Ach · 17. November 2016 um 11:49

Ich habe noch eine Frage: Wie bekomme ich es hin, dass die einzelnen Blöcke, beim verkleinern der Bildschirmgröße, nicht hinter den anderen Block rutschen? Den oberen Bereich habe ich durch:
.container
{
overflow: hidden visible;
margin: 0em auto;
width:100%;max-width:1200px;
}

hinbekommen.
Der untere Bereich liegt nun aber quer über die Seite. Auch mit float habe ich es nicht hinbekommen. Es muss doch machbar sein, dass die Button plus Text sauber untereinander aufgelistet werden, wenn der Bildschirm sich verkleinert

icatch · 17. November 2016 um 12:04

Könntest du bitte einmal eine aktuelle Version hochladen (auf bplaced oder z.B. bei jsfiddle nach bauen), damit wir auf dem neusten Stand der Dinge sind, da sich jeder CSS Code komplett auf die Seitenstrucktur auswirken kann.

Dein “overflow”-Befehl ist ungültig. Die Eigenschaft " hidden visible" gibt es nicht und macht auch (wenn man es wörtlich nimmt) keinen Sinn -> http://www.css4you.de/overflow.html .

Wenn du den Text, vor dem blauen Hintergrund meinst, dann ändere die “width”-Eigenschaft bei “#welcome .container” genauso ab, wie bei dem normalen “.container”, also z.B. “width:100%” bzw. “width:100%;max-width:1200px;”. Hier ist die Breite auf 1000px festgelegt.

Felix_Ach · 17. November 2016 um 12:36

https://jsfiddle.net/6m2u3zeu/ <- hoffe, der Link funktioniert.

Ich habe wirklich vergessen den “.container” bei “#welcome” anzupassen.
Sieht schon viel besser so aus. Nur der letzte Punkt “Erfahrungsaustausch” hat sich verschoben und ich kann den Grund nicht finden.
Fällt sonst noch etwas auf?

Vielen Dank für die Hilfe!

icatch · 17. November 2016 um 15:39

Hi Felix,

ersetzte deine “.boxA, .boxB, .boxC”-CLASS durch das folgende:

.boxA, .boxB, .boxC{
float:left;
width:30%;
margin: 2px 1.5%;
}

Somit entsprechen die Boxen, egal welche du damit ansprichst, immer 33% (fast ) der Parent-Container Breite.
Damit kannst du die CLASS boxA,B,C auf nur z.B. “.boxFooter” beschränken.
Wenn du jetzt noch sagen willst, wenn die reale Pixel-Bildschirmgröße kleiner ist als 600px, dann sollen die Boxen untereinander stehen, benötigst du noch zusätzlich diesen Code hier:

@media (max-width: 600px){
 .boxA, .boxB, .boxC{
 float:none;
 width:100%;
 margin: 14px auto; 
 }
}

Damit die Bildschirmgröße (bezogen auf das @media) von Handys real ausgegeben werden kann, musst du dies noch vorher im VIEWPORT definieren ( https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag )

EDIT:
Der Grund, warum sich die Boxen verschieben ist, das du eine feste Breite von “384px” festgelegt hast, pro Box, und diese somit auch nur perfekt passen, wenn der parent-Container eine Breite von “1212px” (3x 404px (inkl. 20px margin-right)) besitzt.

Felix_Ach · 18. November 2016 um 06:45

Hi icatch,

vielen Dank für Deine Ausführungen und Hilfe!

Ich habe jetzt den Quellcode wie folgt verändert:

<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />

Wo baue ich diesen Part ein?

@media (max-width: 600px){
.boxA, .boxB, .boxC{
float:none;
width:100%;
margin: 14px auto;
}

Nochmals vielen Dank!

icatch · 20. November 2016 um 23:27

das ist ein CSS-Code.
Einfach in deine CSS Datei schreiben, entweder direkt unter dem orginal “.boxA, .boxB, .boxC{…}” Befehl oder am Ende der CSS Datei.

Felix_Ach · 21. November 2016 um 06:16

So, nun hab ich es… vielen Dank!!!