WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik


Homepage und Webhosting-Forum

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !


Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » CSS vertical-align » Antworten
Benutzername:
Passwort: Passwort vergessen?
Inhalt der Nachricht: Fett | Kursiv | Unterstrichen | Link | Bild | Smiley | Zitat | Zentriert | Quellcode| Kleiner Text
Optionen: Emailbenachrichtigung bei Antworten
 

Die letzten 5 Postings in diesem Thema » Alle anzeigen
von Ori
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.
von Maxx
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

Nach oben