Marge innerhalb eines DIV

Ich versuche, Rand etwas text in ein div und ich will nicht an den Rand der ganzen Seite, ich will, dass die Marge beim starten von div. Das ist, weil ich die website fit für Menschen, die mindestens 800 x 600 Auflösung Bildschirme und wenn ich habe, mit Einschüssen die ganze Seite der website geschaut habe, unterscheiden sich für Menschen mit anderen Auflösungen als 1920 x 1080 (Meine Auflösung).

CSS

body
{
    background-color: #fff;
    margin: 0;
}

p
{
    display:inline;
}

.logo
{
    position:absolute;
    background-image:url(images/Logo.png);
    background-position:center;
    background-repeat: no-repeat;
    height: 60px;
    width: 100%;
}

.logobg
{
    background-color: #0e1216;
    width: 100%;
    height: 60px;
    min-width: 800px;
}

.navBarBtn
{
    float:left;
    margin-left: 10px;
    margin-top: 15px;
    width: 100 %;
    height: 25px;
}

HTML

<body>
<!--Logo & Navigation Bar-->
<div class="logobg">
<div class="logo">

<p id="text1" class="navBarBtn1"> Hem </p>
<p id="text1" class="navBarBtn2"> Om Oss </p>
<p id="text1" class="navBarBtn3"> Referenser </p>
<p id="text1" class="navBarBtn4"> Partners </p>
<p id="text1" class="navBarBtn5"> Kontakt </p>

</div>
</div>

Und hier ist die website, Sie können also schaut es Euch. Website URL

InformationsquelleAutor kemkoi | 2014-11-11

1

Sind Sie richtig, dass Sie verwenden können, weniger Klassen für die navigation-buttons. Mit einem Float:Left in die css-Klasse wird diese Zeile, horizontal, solange der Bildschirm oder die Kiste ist breit genug, um fit, sonst wird es eine zweite Linie darunter. Sie erwähnt, dass Sie möchte, dass die Website optimiert für jemanden mit einem Bildschirm von mindestens 800px breit. Da ich auch empfehlen, die Sie hinzufügen, ein min-width:800px zusätzlich zur width:100% in Ihrem container-Klasse (logobg). Wenn Sie lassen einfach die Breite auf 100%, jemand mit einem kleineren Bildschirm wird das Menü verkleinern und neu ausrichten ein wenig, und Ihre Tasten bleiben nicht alle horizontal. Bitte sehen Sie sich den code unter:

HTML
```
 Hem 
 Om Oss 
 Referenser 
 Partners 
 Kontakt 
```
CSS
```
.logobg {
background-color: #0e1216;
width: 100%;
min-width: 800px;
height: 60px;
}

.navBarBtn {
float:left;
margin-left: 10px;
margin-top: 15px;
width: 100%;
height: 25px;
}
```
- Allright, danke für die Antwort, aber dies immer noch nicht behoben ist das problem mit der Marge Teil. Ich lasse Sie einen Blick auf, wie die website aussieht, wie live: http://www.undertak.se ; Wie Sie sehen können, es sieht nicht sehr gut aus. Ich will den text, der sich auf der oberen linken, um zu zeigen, bis nach dem logo.
- Ah ok wusste ich nicht vollständig verstehen, was Sie gesucht haben. In diesem Fall glaube ich, werden Sie wahrscheinlich nicht wollen, dass die Navigations-Schaltflächen im inneren des div, die Ihr logo als hintergrund. Ich würde vorschlagen, du gibst dem div mit dem logo ein float:left, so dass es zu einem Teil der "Linie" mit dem nav-links. Also in der css-Klasse .logo hinzufügen float:left; und in der html hinzufügen, und beenden </div> direkt vor der navigation links statt nach. Mit diesem Weg werden Sie wohl auch müssen .logo einer bestimmten Breite/Höhe, damit es nicht schneiden Sie etwas aus oder schieben Ihre nav entfernt
InformationsquelleAutor Kristen Vogler
0

Verwenden Sie die css-Eigenschaft padding des Containers (div) statt. Polsterung ist der Raum, innen und Rand des Elements, während die Marge ist der Raum außerhalb der Grenze des Elements.

Check-out-box-Modell.
- Könnten Sie mir ein Beispiel, ich habe versucht, ändern Sie die Marge für die Polsterung, aber ich sehe keine Veränderungen.
InformationsquelleAutor Platypus Maximus

Ich bin nicht sicher, ob dies ist, was du suchst, aber wenn es ist, Sie schwimmen konnte jedes "p" - element, und fügen Sie dann die Margen zwischen Ihnen, anstatt Sie positioniert sich als absolute.

HTML:

<p id="text1" class="navBarBtn"> Hem </p>
<p id="text1" class="navBarBtn"> Om Oss </p>
<p id="text1" class="navBarBtn"> Referenser </p>
<p id="text1" class="navBarBtn"> Partners </p>
<p id="text1" class="navBarBtn"> Kontakt </p>

CSS:

.navBarBtn
{
    float:left;
    margin-left: 10px;
    margin-top: 15px;
    width: 100 %;
    height: 25px;
}

BEISPIEL:http://jsfiddle.net/xakaxsqg/3/

InformationsquelleAutor carlosHT

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.