DIV auf der rechten Seite der Seite
Ich habe ein problem mit der Platzierung der 'navigation' div (innerhalb von 5 Tasten) auf der rechten Seite der Seite in der '#header' div. Die 'navigation' div ist noch neben dem "logo" div.
Kann mir jemand helfen, es zu bekommen auf der rechten Seite der Seite?
CSS-code:
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML-code:
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
- machen Sie es
float: right;
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es mehrere Ansätze, um dies, und Sie haben zu Experimentieren, was für Sie arbeitet.
Zuerst von allen, gibt es die Eigenschaft " position, wenn Sie wollten, statt die navigation zu den rechten, die Sie bekommen würde:
Dieser Ansatz ist sehr situativ und kann brechen. In einigen Fällen, sogar zu brechen, die gesamte lay-out. Best practices diktieren zu verwenden, diese so wenig wie möglich, aber manchmal gibt es keine andere Wahl.
Andere Weise, die möglicherweise oder möglicherweise nicht arbeiten, wieder, ist die Verwendung der Eigenschaft float
0
keine Einheiten. Es ist nur0
nicht0px
🙂Tun, wie diese (verwenden Sie schweben & vergessen Sie nicht, der klar im content-div) :
anpassen Polsterung rechts und von oben px, wenn u wollen....
Müssen Sie die Verwendung von float in der navigation div und einige Breite.
Update dieser Klasse und überprüfen es sollte funktionieren
Youri,
Gibt es ein paar Möglichkeiten, dies zu erreichen Wirkung, hier ist eine.
Werfen Sie einen Blick auf diese:http://jsfiddle.net/legendarylion/8jKUP/1/
Was wir hier tun, ist, deklarieren Sie ein übergeordnetes element relativ, und das element, das Sie wollen Stil in der oberen rechten Ecke absoluten in diesem Verhältnis.
Werfen Sie auch einen Blick in meine Kommentare in den code für einige weitere Ideen, die ich denke, könnte nützlich sein für Sie.
Ich verwendet
margin-left
Eigenschaft wie folgt:Den
margin-left
schaffen Raum aus der Seite des Elements. Sie können die linke Seite von element, mit genug Platz, dann ist Ihr element der rechten Seite der Seite.Referenz:
https://www.w3schools.com/css/css_margin.asp