Hej hej.. jag undrar hur jag får en text att lägga sig över två <div>, så som texten "Torsten" ser ut på http://dotar.scorpionshops.com/tmp/bloggdesign.jpg
Jag vill alltså inte använda en bild för att åstadkomma detta, utan endast text och css. :)
Text över två <div>
3 svar · 394 visningar · startad av dotar
Det här är ett sätt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>...</title>
<style type="text/css">
#container {
position: relative;
top: 20px;
width: 500px;
margin: auto;
border: 1px solid #000;
background-color: #ccc;
padding: 10px;
}
#container p {
margin: 0px;
padding: 0px;
}
#container #menu {
position: relative;
top: -15px;
border-bottom: 1px solid #888;
}
#container #menu h1 {
display: inline;
position: relative;
top: -15px;
margin: 0px;
}
#container #menu p {
position: absolute;
top: 0px;
right: 20px;
padding: 0px;
margin: 10px 0px 0px 0px;
}
#container #menu p a {
margin: 0px 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<h1>Rubrik</h1>
<p><a href="#">Nånting</a><a href="#">Nånting annat</a></p>
</div>
<p>Lite text</p>
</div>
</body>
</html>
Två <div>?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Torsten</title>
<style type="text/css">
html { background-color:#000; color:#ccc; }
body { background-color:#333; color:inherit; margin:5em auto 0 auto; width:30em; }
h1 { position:absolute; margin-top:-.7em; }
</style>
</head>
<body>
<h1>Torsten</h1>
...
Tack så mycket :)
Har en till fråga: Hur gör man så att en bild får en border ett par pixlar utanför bild? (Ja, så som det ser ut på bilden i föregående inlägg ;))
Edit: hittade själv:
border: 1px solid #ccc;
padding:5px;
margin: 10px 10px 10px 10px;