css - CSS - tekst position - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css tekst position

Bruger #16833 @ 24.10.11 20:54

Hej.
Jeg står her og er helt ny indenfor CSS & HTML.

Jeg har sat min side op med hjælp af CSS.
Dog kan jeg ikke få teksten i menuen til at stå i midten af baren (vertikalt), hvordan får jeg den til det?

I kan se siden her: jakobnissen.dk/www

HTML kode:

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Jakob Nissen</title>
 <link rel="stylesheet" href="stylesheet.css" type="text/css" />
 </head>
 
 <body bgcolor="#ebebeb" >
 <center>
 <table width="944" height="520">
 <tr>
   <td width="729" height="91" id="topbar">&nbsp;</td>
   <td width="203" height="49" id="social2">&nbsp;</td>
 </tr>
 <tr>
   <td height="54" colspan="2" id="menu"> <ul id="ulnav">    
 <li id="linav"><a href="#" class="nav">Forside</a></li>
 <li id="linav"><a href="#" class="nav">Om mig</a></li>
 <li id="linav"><a href="#" class="nav">Blog</a></li>
 <li id="linav"><a href="#" class="nav">Kontakt</a></li>
 </ul></td>
 </tr>
 <tr>
   <td height="350" colspan="2" id="content">Velkommen til min forside. :-)
 </td>
 </tr>
 <tr>
 <td height="25" colspan="2" id="copyright">Copyright © Jakob Nissen </td>
 </tr>
 </table>
 </center>
 </body>
 </html>

CSS kode:

CSS kode

 @charset "UTF-8";
 /* CSS Document */
 #topbar {
     background-image:url(logo.gif);
     background-repeat:no-repeat;
     width:769px;
     height:91px;
 }
 
 #menu {
     background-image:url(topbar.gif);
     background-repeat:no-repeat;
     font-family:Tahoma;
     font-size:18px;
     color:#ebebeb;
     font-weight:bold;
     width:940px;
     height:58px;
 }
 
 #social2 {
     background-image:url(social.gif);
     background-repeat:no-repeat;
     background-position:center;
 }
 
 #content {
     background-color:#FFF;
     border-style:solid;
     border-width:thin;
     border-color:#999;
     font-family:Tahoma;
 }
 
 #copyright {
     background-image:url(copyright.gif);
     background-repeat:no-repeat;
     color:#FFF;
     text-align:center;
     font-size:12px;
     font-family:Tahoma;
     width:940px;
     height:25px;
 }
 
 #ulnav {
     list-style-type:none;
 }
 
 #linav {
     float:left;
 }
 
 a.nav:LINK, a.nav:visited {
     display:block;
     width:150px;
     color:#FFF;
     text-align:center;
     text-decoration:none;
 }
 
 a.nav:hover {
     color:#000;
     background-color:#ebebeb;
 }

Indlæg senest redigeret d. 24.10.2011 20:55 af Bruger #16833

7 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 11 karma

Sorter efter stemmer Sorter efter dato

Bruger #11328 @ 24.10.11 21:33

1.323

HTML Tables er ikke lavet til design/sitestruktur, men til fremstilling af data. Derfor bør du ikke benytte tables til at fremstille dit indhold på siden.

Brug div's eller evt. de nye HTML5 tags, som <article> osv.
Inden for disse kan du benytte CSS text tricks, som "text-align: center" og "margin: 0pt auto", men før du har omskrevet din struktur til ikke at benytte tables, kan dette kun lade sig gøre ved hjælp af nogle tablecell alignments. Det er selvfølgelig muligt, men jeg må fraråde det.

BTW. er der ingen grund til at benytte inline styling som bgcolor attributen, da du alligevel har et CSS dokument hvor du bare kan lave en regel:

CSS kode

 body {
   background-color: #ebebeb;
 }

Bruger #9814 @ 24.10.11 22:35

1.302

Prøv at ændre din body til:

CSS kode

 body {
   background-color:#ebebeb;
   font-family:Tahoma, Geneva, sans-serif;
   font-size:12px;
   text-align : center;
 }

til at starte med.

Bruger #10216 @ 24.10.11 22:44

4.283

id er unikt - og må kun eksistere en gang på en side...

Centrering af blok-elementer kan ske på følgende måde.

Kode

<html>
	...
	<style>
		body { ... }
		#wrapper { width: 960px; margin: 0 auto; }
	</style>
	...
	<body>
		<div id="wrapper">
			<p>Indhold</p>
		</div>
	</body>
</html>

Indlæg senest redigeret d. 24.10.2011 22:46 af Bruger #10216

Bruger #16751 @ 24.10.11 21:11

Hej Jakob,

Jeg ville bare lave en align: center

CSS kode

 #menu {
 background-image:url(topbar.gif);
 background-repeat:no-repeat;
 font-family:Tahoma;
 font-size:18px;
 color:#ebebeb;
 font-weight:bold;
 width:940px;
 height:58px;
 align: center
 }

Dette vil centre din menu.

Håber min hjælp kunne bruges.

Mvh. Malte

Bruger #16833 @ 24.10.11 21:24

Hej Malte.
Det hjælper ikke, hverken horizontalt eller vertikalt. Vil gerne have teksten centreret, samtid med at den står i midten af baren på den lodrette led.

Hilsen Jakob

Bruger #16833 @ 24.10.11 21:36

Så fik jeg rodet lidt med nogle divs. Har dog nogle spørgsmål:

Som i kan se på siden er det ikke centreret overhovedet nu og det driller mig, hvad gør jeg galt?

HTML kode

 <body>
 <div id="logo">Logo</div>
 <div id="menu">
 <ul id="ulnav">    
 <li id="linav"><a href="#" class="nav">Forside</a></li>
 <li id="linav"><a href="#" class="nav">Om mig</a></li>
 <li id="linav"><a href="#" class="nav">Blog</a></li>
 <li id="linav"><a href="#" class="nav">Kontakt</a></li>
 </ul>
 </div>
 <div id="content">Content</div>
 <div id="copyright">Copyright</div>
 </body>

CSS kode

 body {
     background-color:#ebebeb;
     font-family:Tahoma, Geneva, sans-serif;
     font-size:12px;
 }
 
 #logo {
     width:940px;
     height:91px;
     background-image:url(logo.gif);
     background-repeat:no-repeat
 }
 
 #menu {
     width:940px;
     height:58px;
     font-size:18px;
     background-image:url(topbar.gif);
     background-repeat:no-repeat;
 }
 
 #content {
     width:940px;
     height:350px;
     background-color:#FFF;
     border-width:thin;
     border-color:#000;
 }
 
 #copyright {
     background-image:url(copyright.gif);
     background-repeat:no-repeat;
     text-align:center;
     color:#FFF;
 }
 #ulnav {
     list-style-type:none;
     text-align:center;
     vertical-align:middle;
 }
 
 #linav {
     float:left;
     text-align:center;
     vertical-align:middle;
 }
 
 a.nav:LINK, a.nav:visited {
     display:block;
     width:150px;
     color:#FFF;
     text-decoration:none;
 }
 
 a.nav:hover {
     color:#000;
     background-color:#ebebeb;
 }

Indlæg senest redigeret d. 24.10.2011 22:28 af Bruger #16833

Bruger #16833 @ 25.10.11 16:46

Siden er droppet og en ny er bygget op. :-)

Indlæg senest redigeret d. 27.10.2011 20:14 af Bruger #16833

CSS - tekst position

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler