Responsiv Webdesign!!! Viele Fragen auf einmal!!

BloodSword · #1 (**permalink**) 06.01.2015, 17:44

Hallo, ich habe ein paar Fragen zum responsiv Webdesign:

1. Ich habe eine Navigation ähnlich wie die auf dieser Seite: "http://www.teamorange.de/". Der einzige Unterschied, ich habe von dem Linken Logo und Rechten Listenpunkt mehr Abstand zum Seitenrand gelassen. Genau wie bei dieser Webseite schieben sich bei meiner Webseite die Listenpunkte und das Logo zusammen, wenn ich das Browserfenster verkleinere. Das Problem: Bei der Webseite von TeamOrange verkleinert sich der Abstand vom Logo zum Seitenrand und von den Listenpunkten zum Seitenrand je weiter ich das Browserfenster verkleinere. Bei meiner Webseite bleibt der Abstand zum Seitenrand immer 14%. Ich möchte, dass sich, je kleiner ich das Browserfenster mache, desto weiter soll sich der Abstand zum Seitenrand verkleinern, bis er fast 0 ist und dann einen Breakpoint einsetzt.
Der Code steht unten!

2. Der Header ist wieder ähnlich wie bei mir. Doch wenn ich bei der TeamOrange Webseite das Browserfenster verkleinere bleibt der das untere Ende von Headerrand genau auf der Größe vom unteren Browserrand, sodass er nicht darüber hinaus geht oder zu klein ist. Das ist bei mir nicht der Fall! Ich habe meinen Header eine feste Größe in Pixeln angegeben. Was muss ich machen, damit ich genau das selbe Verhalten habe, wie auf der Seite von Team Orange?
Code steht unten.

3. Wie richte ich Buttons oder Divs mit Überschriften so aus, dass wenn ich das Browserfenster zusammendrücke, dass sie immer in der Mitte bleiben. Nicht nur in der Horizontalen Mitte sondern auch immer an der Vertikal richtigen Stelle. Bei der Horizontalen richtigen Stelle habe ich es bisher so gemacht, dass ich dem Button position: relative; gegeben habe und top:50% (minus die Breite des Buttons in %); Doch das funktioniert nicht wirklich. Habt ihr eine gute Lösung?
Code steht unten!

PS.: Der Code des Seite von TeamOrange ist ziemlich unleserich (sonst hätte ich mir die Fragen selbst beantworten können), vor allem für mich als Newbie-Webdesigner, falls ihr daraus schlau werdet könntet ihr alle meine Fragen beantworten. (B2B Werbeagentur team

range Stuttgart/Esslingen Webagentur Industrie)

Gruß,

BloodSword

HTML Code Navi:

HTML-Code:

<nav>
		<div class="MainNav">
			<ul>
				<li><a href="#"><strong>HOST</strong>PAGE</a></li>
				<li class="li-Button"><button onclick="" class="Button"><span>Ausloggen</span></button></li>
				<li><a href="#">Know-How</a></li>
				<li><a href="#">Pinnwand</a></li>
				<li><a href="#">Cloud</a></li>
				<li><a href="#"><span class="active">Startseite</span></a></li>
			</ul>
		</div>
	</nav>

CSS Code Nav:

HTML-Code:

.MainNav ul{
	margin:0;
}


.MainNav{
	position:fixed;
	height:auto;
	width:100%;
	background:#232d3b;
	border-bottom: 8px solid #ee5f15;
	left:0;
	right:0;
	top:0;
	z-index:100;
}


.MainNav ul li {
    display: inline;
    float: right;
    list-style: outside none none;
    margin-bottom: 19px;
    margin-top: 19px;
    padding-left: 17px;
    padding-right: 17px;
}



.MainNav ul li:first-child {
    background: url("../Img/NavIcon.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    float: left;
    height: 50px;
    margin: 8px 0 0 14%;
    padding: 0 0 0 46px;
}


.MainNav ul li.li-Button {
    margin: 0 23% 0 0;
    padding-bottom: 12px;
    padding-top: 10px;
}


.Button{
	height:38px;
	background:#a3d39c;
	border:0;
	padding-left:10px;
	padding-right:10px;
	box-shadow: 0px 3px 0px rgba(115, 158, 108, 0.60);
    -moz-box-shadow: 0px 3px 0px rgba(115, 158, 108, 0.60);
    -webkit-box-shadow: 0px 3px 0px rgba(115, 158, 108, 0.60);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor:pointer;
    width:105px;
}

.Button:hover{
	background:#95c08f;
}

HTML Code Header:

HTML-Code:

	<div class="content">
		<div class="Header">
			<button class="Game-Button">Play a Game</button>
			<div class="Header-H"><h1>The correct Cloud for you!</h1></div>
			<img class="Header-Bild"src="Img/Header.png">
		</div>


                <!-- Hier kommt weiterer Code-->

CSS Code Header:

HTML-Code:

.Header{
	background:#ff7B33;
	max-height:600px;
	min-height:525px;
	max-height:100%;
	margin-top:5.44%;
	position:relative;
	width:100%;
	border-bottom: 30px solid #db6426;
	z-index:3;
}

img.Header-Bild{
    display: block;
    height: auto;
    position:absolute;
    left:33%;
    top:90px;
    width:37%;
}

.Game-Button{
	position:absolute;
	top:77.4%;
	left:43.4%;
	width:200px;
	height:55px;
	background:#7accc8;
	border:0;
	color:#fff;
	border-bottom: 4px solid #45a39e;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor:pointer;
}

.Game-Button:hover{
	background:#60C2BD;
}


.Header-H{
	position:absolute;
	top:0%;
	left:29%;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Modernes Webdesign mit CSS - Workshop-Buch mit Schritt für Schritt Anleitungen	Webstandard	Ressourcen	0	04.07.2011 12:46
Generelle Fragen zum Thema images und Webdesign :)	Forgetta	(X)HTML	1	03.08.2010 14:58
Fragen über Fragen	jules	CSS	5	09.10.2008 15:21
Video zum Thema Barrierefreies Webdesign	Webstandard	Barrierefreiheit	11	27.11.2006 13:41
utf8 Fragen und Probleme	lewian	(X)HTML	11	07.09.2005 01:47