Beiträge von gamester

gamester

Hallo Leute

Auf meiner Seite möchte ich die oben fixierte Navigation festsetzen, damit diese wenn der Browser gezoomt wird nicht mitvergrössert wird.
Dies aufgrund der Bedienbarkeit auf dem Tablet. Wenn man zoomt. um den Text besser zu lesen dann vergrössert sich die Navigation (und der fixierte Footer) automatisch mit, was den Lesebereich ziemlich einschränkt.
Wie kann ich den Zoom für einzelne Elemente deaktivieren?

Die Seite ist verwendet das Twitter Bootstrap 3.

Meta im Head

HTML

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

HTML

<div class="navbar navbar-inverse navbar-fixed-top"> <!--Navigationsfläche navbar-inverse= schwarz navbar-static-top=oben behalten-->	
	<div class="container">	
		<a href="home.html" class="navbar-brand" style="margin-left:0px;">Seitentitel</a> 
		<div class="pull-right">
			<button type="button" class="btn btn-danger mc-button-home-nav"><a href="home.html">Home</a></button>
		</div>	
	</div>
</div>

Vielen Dank für eure Hilfe

gamester

Zitat von wolf

Genau richtig, dein Browser hat vordefinierte Werte für alle möglichen HTML Elemente, z.B. h1 hat so und so viel Margin...
Wenn du in Firefox unterwechs bist dann hol dir mal das Addon firebug und mach einen Rechtsklick auf eins der Div's -> Element mit firebug untersuchen
dann fährst du im angezeigten Quellcode über die Div's und siehe da du siehst alle definierten Margin's/Padding's..

Ok das wusste ich nicht mit den vordefinierten Werten. Gibt es da eine Liste oder so ? Sind diese Werte bei jedem Browser verschieden ?
Habe das ganze mit Firebug beriets untersucht aber nichts gefunden, Google Chrome hat ein ähnliches Tool bereits vorinstalliert.

Zitat

Zu deinem Problem, wie schon gesagt., dein Stylesheet immer einfach so anfangen:

CSS

/* >> * << bedeutet so viel wie: für jedes Element */
*{
    margin 0;
    padding 0;
}
/* Hier dein ganzes CSS */
body{
    width: 90%;
}
/* bla bla bla :D */




/* --------------------------------------------------------- */
/* ein Beispiel für weitere Anwendungszwecke:
 * bedeutet so viel wie für jedes Element was innerhalb eines Div's liegt */
div *{
    color: red;
}

Alles anzeigen

Danke das Problem ist nun gelöst
der Universalselector hats gerichtet

CSS

*{
    margin 0;
    padding 0;
}

gamester

Hallo Leute

Ich habe bei meinem Layout welches ich gerade erstelle ein Problem mit den Abständen.
Habe jedes Div mehrmals abgesucht aber habe den Fehler nicht gefunden.
Aussen sind 2 Aussencontainer bevor der div-container mit dem Inhalt, header und footer
kommt.
obwohl ich kein margin definiert habe macht das div: outercontainer-small einen Abstand nach oben ( ca 15px ).
Auch der Inhalt und der Footer haben einen Abstand nach oben obwohl ich im CSS nichts definiert habe.

Was könnte das Problem sein ?

Vielen Dank für eure Hilfe

HTML

<!DOCTYPE html> 
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/meinecss.css">-->
<!--<link rel="stylesheet" type="text/css href=""-->  
<meta name="description" content="">
<meta charset="UTF8"/>
<title>Website</title>
<style type="text/css"> 
html, body{ 
margin: 0px; 
padding: 0px;  
text-align:center; 
height: 100%; 
overflow: hidden; 
}




header{
width: 100%; 
background-color: blue;
}




footer{
width: 100%; 
background-color: red;
}




#outercontainer-big{ /*1*/
height: 100%; 
overflow:auto;
width:100%;
text-align: center;  
}




#outercontainer-small{ /*2*/
min-height: 100%;
width:1059px;
margin:auto auto; 
}




#container{ 
width:1020px;
height: 100%;
margin:0px auto;
text-align:left;
z-index: 99;
}




#content {
width:1020px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="outercontainer-big"> 
	<div id="outercontainer-small">
		<div id="container">
			<header>
			<h2>HEADER</h2>
			</header> 
			<div id="content"> 
				<h1> INHALT </h1>
			</div> 
			<footer>
			<h2>FOOTER</h2>
			</footer> 
		</div>
	</div>
</div>
</body>
</html>

Alles anzeigen

Beiträge von gamester

Bereich bei Zoom ignorieren, Navigation nicht mitzoomen (Bootstrap)

Abstände (nach oben) können nicht entfernt werden: margin

Abstände (nach oben) können nicht entfernt werden: margin