Text över två <div>

3 svar · 394 visningar · startad av dotar 26 mars 2006

dotarMedlem sedan okt. 2002117 inlägg

Frågan26 mars 2006 14:23#1

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. :)

CssonMedlem sedan feb. 2000438 inlägg

26 mars 2006 15:03#2

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>

zcorpanMedlem sedan dec. 20042 245 inlägg

26 mars 2006 15:03#3

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>
  ...

dotarMedlem sedan okt. 2002117 inlägg

26 mars 2006 15:51#4

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;