5 svar · 499 visningar · startad av Fickle
Jag skall lägga upp en hemsida med endast en rad text. Text remsan skall ligga centrerat i bilden. Problemet är att när jag ändrar upplösning hamnar textremsan ibland för högt upp eller får långt ner - den är inte centrerad.
i 1280x1024, som jag jobbar i, så får jag allt att se bra ut. Men om då folk besöker sidan med lägre upplösning så kommer det att se kasst ut.
Finns det något tricks som gör att texten alltid ligger i mitten av bilden, oavsett upplösning?
Jag börjar få panik.
sputnik skrev:
det du söker finns nog här ->
Det ser perfekt ut! Tack!
Tyvärr är jag ingen hejjare på HTML, finns det ingen smidig kod man kan kopiera in i sidan?
Tack igen!
Kolla källan? :i
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen">
<!--
body {
color: white;
background-color: #003;
margin: 0px
}
#horizon {
color: white;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
}
#content {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
background-color: #f00;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
}
-->
</style>
</head>
<body>
<div id="horizon">
<div id="content">
<h1>Dead Centre!</h1>
</div>
</div>
</body>
</html>
Jag tog bort en del onödiga grejer. Men förmodligen låg de där av en anledning. Ex. overflow: visible; och allt det där. Måste det ligga där för att fungera i äldre läsare? Eller varför har de massa skräp i koden?
silfver skrev:
Kolla källan? :i
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>Dead Centre</title> <style type="text/css" media="screen"> <!-- body { color: white; background-color: #003; margin: 0px } #horizon { color: white; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; } #content { font-family: Verdana, Geneva, Arial, sans-serif; font-size: 14px; background-color: #f00; margin-left: -125px; position: absolute; top: -35px; left: 50%; width: 250px; height: 70px; } --> </style> </head> <body> <div id="horizon"> <div id="content"> <h1>Dead Centre!</h1> </div> </div> </body> </html>Jag tog bort en del onödiga grejer. Men förmodligen låg de där av en anledning. Ex. overflow: visible; och allt det där. Måste det ligga där för att fungera i äldre läsare? Eller varför har de massa skräp i koden?
Jo, jag tänkte det. Men hur får jag bort rutan och det? Det ska bara vara en textremsa i mitten i svart hade jag tänkt.
Det är ordnat. Tack för hjälpen!