Skulle du kunna posta din HTML samt CSS? I sådana fall ska jag försöka hjälpa dig 
Citat:
Visst, koden är lite lång, men jag kopierar in den nedan. Kortar ner lite så du ser vad jag frågar om.
HTML-kod:
<body> <div class="pageflex"> <div class="headerdiv"> <h1 class=logga_x>Logga</h1> <ul class="navi"> <li><a href="index.html">Hem</a></li> <li><a href="kont.html">Kontakt</a></li> <li><a href="info.html">Info</a></li> <li><a href="lankar.html">Länkar</a></li> </ul> </div> <div class="middle_c"> <div class="middlebar"> </div> </div> <footer></footer> </div> </body>
Min Css nedan:
Kod:
body {
margin: 0;
padding: 0;
height: 100%;
}
.headerdiv {
width: 100%;
height: 100px;
min-width: 720px;
}
footer {
width: 100%;
height: 60px;
padding-top: 20px;
padding-bottom: 20px;
}
.pageflex {
display: flex;
flex-direction: column;
height: 100%;
}
.pageflex .headerdiv {
order: 1;
flex-basis: 100px;
}
.pageflex .middle_c {
order: 2;
flex-basis: 9999px;
}
.pageflex footer {
order: 3;
flex-basis: 100px;
}
__________________
Senast redigerad av Skogsten 2018-06-18 kl. 21:32.
Senast redigerad av Skogsten 2018-06-18 kl. 21:32.
Citat:
Visst, koden är lite lång, men jag kopierar in den nedan. Kortar ner lite så du ser vad jag frågar om.
Min Css nedan:
HTML-kod:
<body> <div class="pageflex"> <div class="headerdiv"> <h1 class=logga_x>Logga</h1> <ul class="navi"> <li><a href="index.html">Hem</a></li> <li><a href="kont.html">Kontakt</a></li> <li><a href="info.html">Info</a></li> <li><a href="lankar.html">Länkar</a></li> </ul> </div> <div class="middle_c"> <div class="middlebar"> </div> </div> <footer></footer> </div> </body>
Min Css nedan:
Kod:
body {
margin: 0;
padding: 0;
height: 100%;
}
.headerdiv {
width: 100%;
height: 100px;
min-width: 720px;
}
footer {
width: 100%;
height: 60px;
padding-top: 20px;
padding-bottom: 20px;
}
.pageflex {
display: flex;
flex-direction: column;
height: 100%;
}
.pageflex .headerdiv {
order: 1;
flex-basis: 100px;
}
.pageflex .middle_c {
order: 2;
flex-basis: 9999px;
}
.pageflex footer {
order: 3;
flex-basis: 100px;
}
Okej, så om jag förstår dig rätt så vill du att den gråa kvadraten ska ha en likvärdig marginal högst upp och längst ned?
Ha i åtanke att det var länge sedan jag höll på med sådana här saker men jag ska försöka skriva ett litet exempel åt dig. Återkommer om ett tag
Jag är ingen expert och det var ett tag sedan jag höll på med detta, men det här kan säkert vara lite av en ledtråd åtminstone
HTML
CSS
Att jag la till "margin-left:900px" är verkligen ett fulhax, men av någon anledning så fungerar inte "float:right", antagligen för att vi håller på och bökar med flex eller dylikt.
Du får ta mitt exempel med en nypa salt och som en liten spark i rätt riktning
Lycka till!
HTML
HTML-kod:
<body>
<div class="firstdiv">
<div class="seconddiv">
</div>
</div>
</body>
CSS
Kod:
.firstdiv {
display:inline-flex;
width:100%;
height:500px;
background-color:lightgrey;
}
.seconddiv {
margin:auto 5px;
margin-left:900px;
width:300px;
height:300px;
background-color:red;
}
Att jag la till "margin-left:900px" är verkligen ett fulhax, men av någon anledning så fungerar inte "float:right", antagligen för att vi håller på och bökar med flex eller dylikt.
Du får ta mitt exempel med en nypa salt och som en liten spark i rätt riktning
Lycka till!
Skapa ett konto eller logga in för att kommentera
Du måste vara medlem för att kunna kommentera
