| Autor |
Nachricht |
DanielH86
Threadersteller
Dabei seit: 02.07.2009
Ort: Augsburg
Alter: 37
Geschlecht: 
|
Verfasst Do 02.07.2009 13:25
Titel CSS : Mittig positionieren. Hilfe! |
  |
|
Hallo an alle 
Ich habe ein kleines Problem und bin anscheinend zu blöd um dieses zu lösen! Ich habe auch schon im Forum gesucht, aber irgendwie hat alles nichts geholfen. Ich will das "Logo" und Text (http://www.antonhubergmbh.de) Mittig anzeigen! Geht das mit CSS? Wenn ja, mit welchem Code?
Danke für die Antworten...
|
|
| |
  |
 |
naturalshirts
Dabei seit: 15.06.2009
Ort: Potsdam
Alter: 54
Geschlecht: 
|
Verfasst Do 02.07.2009 13:38
Titel Re: CSS : Mittig positionieren. Hilfe! |
|
|
| DanielH86 hat geschrieben: | Hallo an alle
Ich habe ein kleines Problem und bin anscheinend zu blöd um dieses zu lösen! Ich habe auch schon im Forum gesucht, aber irgendwie hat alles nichts geholfen. Ich will das "Logo" und Text (http://www.antonhubergmbh.de) Mittig anzeigen! Geht das mit CSS? Wenn ja, mit welchem Code?
Danke für die Antworten... |
Du meinst vermutlich vertikal mittig, denn horizontal ist es ja mittig. Nimm deine ganzen <p> über dem Logo raus und versuch das: top: 50%; . Und setz das Logo in einen div, nicht in einen p-Tag! Der ist für Text da!
Könnte sein, dass du noch position: absolute; dazutun musst.
Zuletzt bearbeitet von naturalshirts am Do 02.07.2009 13:39, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 02.07.2009 13:59
Titel Re: CSS : Mittig positionieren. Hilfe! |
|
|
| naturalshirts hat geschrieben: | Du meinst vermutlich vertikal mittig, denn horizontal ist es ja mittig. Nimm deine ganzen <p> über dem Logo raus und versuch das: top: 50%; . Und setz das Logo in einen div, nicht in einen p-Tag! Der ist für Text da!
Könnte sein, dass du noch position: absolute; dazutun musst. |
Und dann ists aber immernoch nicht mittig... Denn das Logo hat schließlich auch eine Höhe und 50% top definiert den Anfang bei der Hälfte des Monitors von oben. Ergo musst du einfach ein bisschen weniger geben als 50%, alles andere geht nur mit vielen (JS) Umwegen usw...
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 02.07.2009 14:52
Titel Re: CSS : Mittig positionieren. Hilfe! |
|
|
| DanielH86 hat geschrieben: | Hallo an alle
Ich habe ein kleines Problem und bin anscheinend zu blöd um dieses zu lösen! Ich habe auch schon im Forum gesucht, aber irgendwie hat alles nichts geholfen. Ich will das "Logo" und Text (http://www.antonhubergmbh.de) Mittig anzeigen! Geht das mit CSS? Wenn ja, mit welchem Code?
Danke für die Antworten... |
kannst du evtl anhand einer skizze zeigen was du erreichen möchtest?
es gibt schein ein paar tricks elemente direkt in der mitte des browsers darzustellen.
auch wenn die auflösung geändert wird
|
|
| |
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Do 02.07.2009 15:41
Titel
|
|
|
|
bei dieser hitze funzt die sufu nicht (offensichtlich) - daher hilft dir vlt. dieser link
|
|
| |
|
|
larryc
Dabei seit: 20.07.2005
Ort: St. Pölten
Alter: -
Geschlecht: -
|
Verfasst Do 02.07.2009 23:04
Titel
|
|
|
Hallo!
Probiers mal damit:
In den Header:
| Code: | <style type="text/css">
#logo {
position:absolute;
width:422px; /* Ich nehme eine gerade Zahl, damit ich später genau die Hälfte davon nach links gehen kann */
height:150px; /* Spiele damit ein bisschen, damit Du die richtige Höhe rauskriegst */
left:50%; /* Positioniert den linken Rand des Bereichs in die Mitte, horizontal*/
top:50%; /* Positioniert den oberen Rand des Bereichs in die Mitte, vertikal */
margin-left:-211px; /* verschiebt das logo-DIV genau um die Hälfte der Breite nach links */
margin-top:-57px; /* verschiebt das logo-DIV genau um die Hälfte der Höhe nach oben */
}
</style>
|
In den Body:
| Code: |
<div id="logo">
<img width="421" height="138" src="neueslogo.png"/><br/>
Unsere Website wird gerade umgestaltet. Schauen Sie doch einfach später wieder rein!
</div> |
Ich hoffe ich hab keinen Fehler gemacht, und hoffe, geholfen zu haben!
Lg Chris
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 03.07.2009 00:32
Titel
|
|
|
| larryc hat geschrieben: | | text |
Mit dieser Methode wird aber der Content beim skalieren aus dem viewport des browsers geschoben, sofern er größer ist als dieser. das ist sehr uncool, zumal viele leute inzwischen große monitore haben und ihre fenster nicht immer auf die volle bildschirmgröße skaliert (yeah. echtes multitasking ).
daher empfiehlt sich eher der link von l3mon auch wenn er geringfügig aufwändiger ist.
|
|
| |
|
|
clline
Dabei seit: 03.07.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 03.07.2009 10:12
Titel
|
|
|
Probier mal, ob Dir folgendes zusagt.
| Code: | <!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>Anton Huber GmbH - Ihr Service-Center Wärmemessdienst</title>
<style type="text/css">
<!--
html, body {
width: 100%; height: 100%;
margin:0;padding:0;
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
background-image: url(bg.gif);
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
*#main
{
width: 100%;
height: 100%;
position: absolute;
}
*#center
{
text-align: center;
position: absolute;
width: 500px;
height: 156px;
margin-left: -250px;
margin-top: -78px;
top: 50%;
left: 50%;
}
*#center img
{
width:421px;height:138px;
}
p
{
margin:0;padding:0;
}
div.copy
{
position: absolute;
bottom: 50px;
left: 50px;
}
div.copy p a
{
margin-right: 10px;
}
div.copy span
{
color: #999999
}
</style>
</head>
<body>
<div id="main">
<div id="center"><img src="neueslogo.png" alt="" />
<p>Unsere Website wird gerade umgestaltet. Schauen Sie doch einfach später wieder rein!</p>
</div>
<div class="copy">
<p> <a href="Zwischenablesung.pdf">Zwischenablesung beauftragen</a>
<a href="mailto:info@antonhubergmbh.de">Kontakt</a>
<span>Copyright © 2009 Anton Huber GmbH. Alle Rechte vorbehalten.</span></p>
</div>
</div>
</body>
</html> |
[edit]
Bitte [code]-Tags verwenden.
Zuletzt bearbeitet von Smooth-Graphics am Fr 03.07.2009 11:02, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
ccs->positionieren->mittig
mittig positionieren ...
Seite mittig positionieren via css
grafik mit css mittig positionieren
jquery slideshow mittig positionieren
css > spalten > mittig ...
|
|
Willkommen auf dem Portal für Mediengestalter
