Forum Mjukvara Programmering och digitalt skapande Tråd

Har förvirrat mig i många <div> html

1
Skriv svar
Permalänk
Medlem
●

Har förvirrat mig i många <div> html

Hej.
Skulle vilja få in text som på bilden:

Gjorde divarna i olika färg så det är lättare att se. Håller på med ett beräknings exempel som jag visar med divarna som får olika storlekar beroende på vad man skriver in, därför så många..

Min ide var att göra 4 divar till runt om men blir väldigt många och jag lyckas inte heller. Lite av problemet är att class="ram" kan ändra storlek också, mellan 3 lägen.. 450x330, 330x450 och 450x450.
Eller finns det någon fin kod man kan anvnda för att få texten att hamna på utsidan av divar i mitten?

Här är inte riktigt koden jag använder, gjorde det lite enklare för att testa mig fram

<div class="ram">
<div class="over"></div>
<div class="venster"></div>
<div class="image"></div>
<div class="hoger"></div>
<div class="under"></div>
</div>
.ram{
margin: 200px 200px;
	float: left; 
	border: 3px solid #f00;
	width: 500px;
	height: 500px;
}
.over{
	float: left; 
	width: 500px;
	height: 50px;
	background: #158;
}
.venster{
	float: left; 
	width: 50px;
	height: 400px;
	background: #22e;
}
.image{
	float: left; 
	width: 400px;
	height: 400px;
	background: #e4d;
}
.hoger{
	float: left; 
	width: 50px;
	height: 400px;
	background: #000;
	background: #685;
}
.under{
	float: left; 
	width: 500px;
	height: 50px;
	background: #aa4;
}
Redigera
Citera flera Citera
Permalänk
Medlem
●

tror att jag löste problemet själv med hjälp av
position: relative; left: -100px;

Kör en liten anna på samma ämne. Går det att gör så att text inte följer efter diven? Har även mått i vita rektangeln men ibland blir den så liten så texten hamnar på rad och långt under rektangeln?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Är det något i stil med detta som du är ute efter?

HTML

<!DOCTYPE HTML>
<html>
<head><link href="style.css" type="text/css" rel="stylesheet"</head>
<body>
<div id="mitten">
     <div id="top"><p>500mm</p></div>
     <div id="vanster"><p>300mm</p></div>
     <div id="hoger"><p>300mm</p></div>
     <div style="clear:both; width: 100%"></div>
     <div id="bottom"><p>500mm</p></div
</div>
</body>
</html>

CSS

p{
    color: #9f4de5;
    margin: 0;
}

#mitten{
    background: #ff0;
    border: 2px solid #F00;
    width: 400px;
    margin: 200px;
}

#top, #bottom{
    width: 100%;
    height: 40px;
    text-align: center;
}
    #top{
        background: #121212;
    }    

    #bottom{
        background: #555;
    }   

#vanster, #hoger{
    width: 40px;
    height: 100%;
    line-height: 320px;
}
    #vanster{
        float:left;
        background: #00F;
    }    

    #hoger{
        float:right;
        background: #848484;
    }
Visa signatur

Ludacris@live.se

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Någonting som är mycket mer logiskt om man tänker på hur markupen renderas och som blir mycket enklare är att ha div-markupen typ såhär:

<div class="ram">
	<div class="over"></div>
	<div class="mittenrow">
		<div class="venster"></div>
		<div class="image"></div>
		<div class="hoger"></div>
	</div>
	<div class="under"></div>
</div>
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara