nicht angemeldet
Margin in Display: Inline
0 0 1 0 0 
marctrix
Margin in Display: Inline
Hey, ich bin Anfänger aslo net böse sein ... ich würde ekine im heder die navigation haben aber nicht mit dem fußanfang gleichbündig. ich hatte es mit margin bei div menu probiert aber ich denke das bei display:inline margin net mehr geht [macht auch sinn]. Wie mache ich dann
Die farben von den bereichen ist zur hilfe das fertige design wir besser ;)
Bitte um hilfe
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Homewoker - mach was du kannst</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300:800" rel="stylesheet">
</head>
<body>
<div class="site">
<header>
<div class="header">
<h1>HomeWorker<h1>
<div class="menu">
<p>Fächer</p>
<p>Kontakt</p>
<p>Impressum</p>
</div>
</div>
</header>
<section></section>
<footer></footer>
</div>
</body>
</html>
CSS :
*{
margin: 0;
padding: 0;
}
.site {
width: auto;
margin-left: auto;
margin-right: auto;
font-family: "Open Sans";
}
header{
width: auto;
height: 50px;
background-color: lightgreen;
}
.header{
width: 1000px;
height: 50px;
background-color: green;
margin-left: auto;
margin-right: auto;
}
.header h1 {
color: white;
display: inline;
}
.header p {
color: grey;
display: inline;
margin-left: 3px;
margin-right: 3px;
font-size: 20px;
}
.menu {
display: inline;
margin-left: 30px;
margin-top: -15px;
}
section{
height: 1000px;
background-color: lightblue;
}
footer {
height: 50px;
background-color: lightgrey;
}
akzeptierte Antworten
Margin in Display: Inline
Bewertung: keine Bewertung
-
Hallo
Die farben von den bereichen ist zur hilfe das fertige design wir besser
Das solltest du zum Testen beibehalten. Viele Probleme entstehen nur weil die Webseitenersteller nicht sehen, wie groß die Container eigentlich sind.
Die height-Angaben solltest von Beginn an weglassen. Die Höhe der Container wird von ihrem Inhalt bestimmt. Davon gibt es nur wenige sinnvolle Ausnahmen. Eine Ausnahme kann ich bei dir nicht erkennen.
Leider kann ich aus deiner Beschreibung nicht erkennen was du genau erreichen willst. Nur das du mit der Breite und / oder Position der Navigationsleiste nicht zufrieden bist. Kannst du das bitte noch einmal genauer Beschreiben?
Gruss
MrMurphy
-
Ich möchte gerne die menu punkte die ich in der menu div festgelegt habe in den header packen ... also habe ich display inline genutzut. Mein Problem ist jetzt das ich div menu nicht bewegen kann mit margin weil das fußbündig mit h1 ist. Homeworker ist ja größer als die punkte, fangen aber gleich an (in einer linie ist logisch). Ich möchte beide mittig im header haben, in einer linie. Hatte da was mit align-content ausprobiert aber nix bekommen.
-
Hallo
ich weiß nicht ob ich den Problem richtig verstanden habe. Probier mal folgendes aus.
Zunächst das zweite (schließende) h1-Tag reparieren:
<h1>HomeWorker</h1>In deinem Quelltext fehlt der Schrägstrich (slash).
Und dann folgendes CSS:
* { margin: 0; padding: 0; } .site { /*width: auto;*/ /*margin-left: auto;*/ /*margin-right: auto;*/ font-family: "Open Sans"; } header { /*width: auto;*/ /*height: 50px;*/ background-color: lightgreen; } .header { width: 1000px; /*height: 50px;*/ background-color: green; margin-left: auto; margin-right: auto; display: flex; } .header h1 { color: white; /*display: inline;*/ background-color: orange; } .header p { color: grey; /*display: inline;*/ margin-left: 3px; margin-right: 3px; font-size: 20px; } .menu { /*display: inline;*/ /*margin-left: 30px;*/ /*margin-top: -15px;*/ display: flex; align-items: center; } section { height: 1000px; background-color: lightblue; } footer { height: 50px; background-color: lightgrey; }Was gelöscht werden kann/soll habe ich auskommentiert. Neue CSS-Anweisungen nach einer Leerzeile hinzugefügt.
Mir ging es nur um dein Problem. Andere "Problemfelder" habe ich außen vor gelassen.
Gruss
MrMurphy
-
DANKE.. genau so
-
Hej Jakob,
DANKE.. genau so
Ich fand es gut, dass @mrmurphy die anderen "Problemfelder" mal außen vor gelassen hat - ist so gar nicht die Art dieses Forums.
Es ist auch schön, dass Dir das Ergebnis gefällt - aaaaber: wenn du mehr verbessern willst, werden wir gerne noch weiteres Optimierungspotential benennen... ;-)
Marc
-
DANKE gerne aber... ich mache wenn ich fertig bin einen neuen Beitrag und markiere euch dann @mrmurphy. Ich stehe noch vor einem großem hügel der html und css hügel da muss ich ertsmal raufkommen. Danach kommt noch der java script gebirge aber erstmal die kleinen.
-
-
-
-
-