Div Container automatisch an Browser anpassen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

marvinkleinmusic hat kostenlosen Webspace.

2:21, 12.8.2013

Hallo Zusammen,

Ich arbeite derzeit an einem neuen Design für meine Community damit es auch auf allen Geräten gleich aussieht möchte ich es so haben das bei jeder auflösung immer der Content alles so ausfüllt das man nicht Scrollen braucht.

Sprich überall soll Die Login leiste , der Content und der Footer so angezeigt werden ,dass man die gesammte Fläche ausgefüllt hat.

Nun wie schaffe ich das?

Hier einmal das Index Gerüst sowie das dazugehörige Stylesheet sowie ein Link zum Design das ihr direkt in den Quellcode schauen könnt :)

http://marvinkleinmusic.bplaced.net/design/index.html

http://marvinkleinmusic.bplaced.net/design/login.css

Index:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Index</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="login.css" />
	</head>

	<body>
	<!--- Login leiste --->
	<div id="content">
		<div id="loginleiste">
			<div id="leiste-logo">
			<h2>Magic Piano Community</h2>
			</div>
			<div id="login">
			<center>
			<FORM method="POST" action="login/index.php?action=login">
			<input type="text" name="login_name" placeholder="Username">
			<input type="password" name="login_pw" placeholder="Password">
			<input type='checkbox' name='autologin' value='true'>Stay logged in
			<input type="submit" name="login" value="Submit"></FORM>
			</center>
			</div>
		</div>
	<!--- Content --->
		
		<div id="main-container">
			<div id="left">
			<img src="images/mpp.jpg"  title="Magic Piano Community" alt="Magic Piano Community" />
			</div>
			<div id="right">
			
			</div>
			
		
		</div>
	<!--- Footer --->	

		<div id="footer">
		
		</div>
	
		
		</div>
	</body>
</html>

LG Marvin

Beitrag zuletzt geändert: 12.8.2013 2:21:52 von marvinkleinmusic

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
pcw

pcw hat kostenlosen Webspace.
6:18, 12.8.2013
Moin.

Wenn ich dich richtig verstanden habe, musst du eigentlich nur via media queries die floats auflösen, heights, margins etc. anpassen, wenn der viewport eine bestimmte Größe unterschreitet, sodass deine DIVs wieder untereinander platziert werden.

Beispiel:
```
@media screen and (max-width: 600px) {
  #right {
    float: none;
    margin-left: 20px;
    ....
}
```
Autor dieses Themas
marvinkleinmusic

marvinkleinmusic hat kostenlosen Webspace.

14:32, 12.8.2013
Das verstehe ich jetzt nicht ganz was soll mir eine max width nützen?

Hier mal zwei Bilder einmal PC und einmal iPod ich möchte jetzt nur das man bei beiden Geräten den Footer ganz unten angezeigt bekommt und man nicht scrollen muss.

http://marvinkleinmusic.bplaced.net/pc.png

http://marvinkleinmusic.bplaced.net/ipod.PNG

LG

pcw

pcw hat kostenlosen Webspace.

18:00, 13.8.2013

Zugegeben, da habe ich dich doch etwas falsch verstanden ... was du aber mit

...und man nicht scrollen muss.

meinst verstehe ich immer noch nicht ... naja war ein langer Arbeitstag :biggrin:

Findest du es schön auf dem iPod oder smartphone die seite zoomen zu müssen um den Text lesen zu können und genau zu zielen, damit man die Buttons trifft?

Responsive Design wäre hier das Stichwort. :wink:

Versuch doch mal folgendes:

In den Head

<meta name="viewport" content="width=device-width, initial-scale=1">

in die CSS Datei (grob formatiert hab ich es schonmal):

@media only screen and (max-width:600px) {
	#content {
		position: relative;
	}
	#loginleiste {
		height: inherit;
	}
	#main-container {
		height: inherit;
		min-height: inherit;
		padding-bottom: 20px;
	}
	
	#login {
		float: none;
		margin: 0;
	}
	#left img {
		max-width: 100%;
		height: auto;
	}
	#login-logo {
		text-align: center;
		margin-bottom: 20px;
	}
	#right {
		width: 90%;
		margin: 0 auto;
	}
	#right input {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#footer {
		height: inherit;
	}
	#footer p {
		margin: 10px;
		text-align: center;
	}
	
}

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city