Home | Registrieren | Einloggen | Suchen | Aktuelles


Forum » Auszeichnungssprachen » CSS vertical-align Antworten
CSS vertical-align

Maxx
Otto-Normal-Poster


Beiträge: 87


Hi, ich bin gerade am erstellen einer neuen Webiste.
Ich habe alles nach XHTML 1.0 und CSS validiert.

Mein Problem jetzt, ich bekomme den Text und das Logo nicht vertical zentriert in den Div-Containern.

Weiß einer wie ich das hinbekommen koennte?

Hier der Code:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 
122: 
123: 
124: 
125: 
126: 
127: 
128: 
129: 
130: 
131: 
132:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Coders-Board(.net) V³</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
	body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
        background-color: #019FCE;
        background-image: url('img_allg/background.jpg');
        background-repeat: repeat-x;
	}
	
	#container
	{
		margin: 1em auto;
		width: 750px;
		text-align: left;
		background-color: white;
		border: 5px solid white;
	}
	
	#header
	{
		height: 25px;
        color: white;
		background-color: #474747;
        border-bottom: 5px solid white;
        text-align: center;
        vertical-align: middle;
	}
	
	#logo
	{
		height: 100px;
		background-color: #019FCE;
        border-bottom: 5px solid white;
	}
	
	#menu
	{
		float: left; /*width: 180px; */
		/*height: 100px; */
        color: #FFFFFF;
		background-color: #0010A1;
	}
	
	#content	
	{
		margin-right: 20px;
		margin-left: 150px;
		/*height: 200px; */
		background-color: white;
	}
	
	#footer	
	{
		clear: both;
        color: white;
		height: 25px;
		background-color: #474747;
        border-top: 5px solid white;
        text-align: center;
	}
    </style>
  </head>
  <body>

    <!-- site -->
    <div id="container">
    
        <!-- header -->
        <div id="header"> Willkommen auf Coders-Board.net V³ </div>
        <!-- // header -->
        
        <!-- logo --> 
	    <div id="logo">
            <div style="text-align: center;">
                <img src="img_allg/header.jpg" alt="header.jpg" />
		    </div>
        </div>
        <!-- // logo -->
        
        <!-- menu --> 
	    <div id="menu">
            <div style="padding-top: 15px;padding-left: 10px;"><b>Head</b></div>
            &nbsp;<img style="padding-left: 10px;" src="img_allg/listmiddle.gif" alt="listmiddle.gif" /> Link1<br />
            &nbsp;<img style="padding-left: 10px;" src="img_allg/listmiddle.gif" alt="listmiddle.gif" /> Link2<br />
            &nbsp;<img style="padding-left: 10px;" src="img_allg/listmiddle.gif" alt="listmiddle.gif" /> Link3<br />
            &nbsp;<img style="padding-left: 10px;" src="img_allg/listmiddle.gif" alt="listmiddle.gif" /> Link3<br />
            &nbsp;<img style="padding-left: 10px;" src="img_allg/listmiddle.gif" alt="listmiddle.gif" /> Link3<br />
            &nbsp;<img style="padding-left: 10px;" src="img_allg/listmiddle.gif" alt="listmiddle.gif" /> Link3<br />
	        &nbsp;<img style="padding-left: 10px;" src="img_allg/listend.gif" alt="listend.gif" /> Link4<br />
            <img src="img_allg/navi_abschluss.jpg" alt="navi_abschluss.gif" />

        </div>
        <!-- // menu -->
        
        <!-- content -->
	    <div id="content">
        
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent hendrerit purus in sapien. Aenean non nulla nec pede ultricies molestie. Duis dui. Suspendisse purus. Vestibulum mi turpis, interdum sit amet, faucibus sed, laoreet id, justo. Sed odio. Duis luctus molestie eros. Vestibulum vitae lectus. Quisque sodales hendrerit erat. Donec a turpis id eros ornare ultricies. Donec nisl turpis, suscipit ac, laoreet sit amet, facilisis non, pede. Fusce iaculis, erat id vestibulum posuere, leo diam gravida dui, eu sagittis turpis mauris nec mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lorem. Ut eu erat varius turpis tempus venenatis. Aliquam.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent hendrerit purus in sapien. Aenean non nulla nec pede ultricies molestie. Duis dui. Suspendisse purus. Vestibulum mi turpis, interdum sit amet, faucibus sed, laoreet id, justo. Sed odio. Duis luctus molestie eros. Vestibulum vitae lectus. Quisque sodales hendrerit erat. Donec a turpis id eros ornare ultricies. Donec nisl turpis, suscipit ac, laoreet sit amet, facilisis non, pede. Fusce iaculis, erat id vestibulum posuere, leo diam gravida dui, eu sagittis turpis mauris nec mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lorem. Ut eu erat varius turpis tempus venenatis. Aliquam.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent hendrerit purus in sapien. Aenean non nulla nec pede ultricies molestie. Duis dui. Suspendisse purus. Vestibulum mi turpis, interdum sit amet, faucibus sed, laoreet id, justo. Sed odio. Duis luctus molestie eros. Vestibulum vitae lectus. Quisque sodales hendrerit erat. Donec a turpis id eros ornare ultricies. Donec nisl turpis, suscipit ac, laoreet sit amet, facilisis non, pede. Fusce iaculis, erat id vestibulum posuere, leo diam gravida dui, eu sagittis turpis mauris nec mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lorem. Ut eu erat varius turpis tempus venenatis. Aliquam.
       
        </div>
        <!-- // content -->
        
        <!-- footer -->
	    <div id="footer">
            &copy; by www.coders-board.net
        </div>
        <!-- // footer -->
        
    </div>
    <!-- // site -->
    
    <p>
        <a href="http://validator.w3.org/check?uri=referer">
            <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" style="border: 0px;height: 31;width: 88" />
        </a>
    </p>
  
  </body>
</html>



praktisch soll im Container "header", "footer" und das Logoimage im Container "logo" vertikal zentriert werden.

Danke!


---
BoardSuche - PHP - Google

  Profil   Editieren   Zitieren

Ori
Fachidiot


Beiträge: 116


Da Du ohnehin ein Pixellayout hast, kannst du die entsprechenden Elemente mit einer padding-Angabe des jeweiligen Containers pixelgenau ausrichten.

Bei Kopf und Fuß sind das rund 4px, und da ich die Größe von Deines Logos nicht kenne, musst Du da selbst ausprobieren. Jedenfalls muss die Höhenangabe bei den Containern entfernt werden, da Firefox sonst die Container zu groß macht.

  Profil   E-Mail   Website   Editieren   Zitieren
 

Antworten
Nach oben