• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Content in die Mitte positionieren !

H

HomepageTerror

Neues Mitglied
Also dies ist mein Content - Code !

Code:

}
div.content {
overflow: auto;
position: absolute;
top: 260px;
left: 330px;
width: 630px;
height: 220px;
font-family: Arial;
font-size: 16px;
color: #000000;
}


Aber mit diesem Code ist der Content (Text) wenn ich (left) einstelle auf jedem Computer bzw. Brwoser anders positioniert, denn es verschiebt sich je nach Größe und passt dann mit dem Hintergrund bild nicht überein. Das Problem ist das bei der (left) Einstellung, das Content von ganz links anfängt. Hätte man vielleicht eine Möglichkeit das der Text genau in der Mitte liegt, sodass ich von da aus (left) einstellen kann? Denn dann ist es auch in jedem Brwoser bzw. Pc gleich positioniert und stimmt mit dem Background überein.
Hoffe mich klar ausgedrückt zu haben !
lAAAAAAAAACH5BAEAAA4ALAAAAAAPAA8AAARb0EkZap3YVabOGRcWcAgCnIMRTEEnCCfwpqt2mHEOagoOnz+CKnADxoKFyiHHBBCSAdOiCVg8KwPZa7sVrgJZQWI8FhB2msGgwTXTWGqCXP4WBQr4wjDDstQmEQA7


Liebe Grüße, HomepageTerror !
 
Werbung:
Hallo HomepageTerror,

wie ich das sehe ist das ein css-code.
ich würde dir empfehlen einfach noch "align: center;" hinzuzufügen.

dann sollt's passen!

lg the_phpunisher
 
Hat es einen besonderen Grund, weswegen du absolut positionierst?
Wenn nicht, verzichte darauf!

Code: 
html, body{
	height:100%;
}

div.vtcl_align{
	height: 50%;
	margin-bottom: -110px;
}

div.content {
overflow: auto;
margin: 0 auto;
width: 630px;
height: 220px;
font-family: Arial;
font-size: 16px;
color: #000000;
background-color: #000000;
}

HTML: 
<div class="vtcl_align"></div>
<div class="content"></div>

EDIT//
Schneller aber unzureichend:
the_phpunisher schrieb:
ich würde dir empfehlen einfach noch "align: center;" hinzuzufügen.
Zum Vergrößern anklicken....
Das reicht nicht. er will es ja vollständig zentriert haben! Horizontal und vertikal. und align:center; gibt es in der form auch garnicht ;)
 
Werbung:
Danke Space Vampire.
Du hast mir schon etwas weitergeholfen :)
Jetzt sieht meine Seite so aus wenn ich es auf mache.Lala.jpg





Aber ich würd jetzt gerne den Code so umschreiben das es so aussieht. richtig.jpg




Bekommt man das irgendtwie hin?



 
Oh, merkwürdig :/

Hier mein gesameter Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>
<title>%titel%</title>
<style type="text/css">
<!--
body {
position: absolute;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: #E6E6E6;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
height: 800px;
width: 6000px
background-attachment: fixed;
background-image: url(http://i54.tinypic.com/2dioujd.jpg);
background-repeat: no-repeat;
background-position: top center;
}
img#design {
position: absolute;
top: 0;
left: 0;
border: none;
}


html, body{
height:100%;
}


div.vtcl_align{
height: 50%;
margin-bottom: -110px;
}


div.content {
overflow: auto;
margin: 0 auto;
width: 630px;
height: 300px;
font-family: Arial;
font-size: 16px;
color: #ffffff;
background-color: #000000;
}


div.navigation {
overflow: auto;
position: absolute;
top: 260px;
left: 160px;
width: 185px;
height: 220px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {
color: #0000ff;
text-decoration:none;
}
a:active {
color: #ffffff;
text-decoration:none;
}
a:hover {
color: #000000;
text-decoration:none;
}
-->
</style>
</head>


<body>






<!-- Start Content -->
<div class="content">
%content%
</div>
<!-- End Content -->


<!-- Start Navigation -->
<div class="navigation">
%navigation_v%
</div>
<!-- End Navigation -->


</body>


<!--


-->


</html>
 
Werbung:
das ist ziemlicher Mumpitz was du da machst. Angefangen dabei, dass du den Body absolut positionierst und ihm unmögliche Maße gibst, bis hin dazu, dass du mein Lösungsbeispiel nicht vollständig übernommen hast. Da fehlt ein Container. Der ist aber wichtig für vertikale Zentrierung.
Absolute Positionierungen heißen so, weil sie meist absolut unnötg sind!
Davon abgesehen sind Scrollbarfarben nur im IE funktional.
Seis drum.
Ich nehme an das soll so ungefähr uassehen: %titel%

Verichte auf absolute Positionierungen und arbeite lieber mit Floats!

EDIT//
Ich habe mich nicht jeglichem Unsinn aus deinem Code angenommen. Lediglich den Teilen, die für das aktuelle Zwischenergebnis zuträglich waren ;)
 
Okey, danke hat mir sehr geholfen ! :)
Und was muss ich einfügen wenn ich einen zweiten content hinzufügen möchte, der rechts von dem ersten Content sein soll und wenn ich noch einen dritten dazu haben will der genau wie der erste ist aber nur dadrunter? Ich habe ein beispiel bild bearbeitet :)

fame.jpg
 
Nun ist genug mit vorkauen.
Beschäftige dich bitte mit CSS grundlagen.
Insbesondere mit float und clear
Versuche eine Lösung und wenn du dabei auf Probleme stößt zeig unss den Code
 
Werbung:
Okey, ich habe es mal ausprobiert..
Aber irgendtwas muss schiefgelaufen sein.. Die position des Contents ist zwar so wie ich es haben wollte, aber die Hinttergrundfarbe des Contents wird nicht angezeigt.. Und es hat eine ganz andere Schriftart :/ Was könnte ich falsch gemacht haben?

Website:

%titel%
 
Hallo.

Du solltest auch die Gross- Kleinschreibung beachten.

Wenn du in deinem CSS Kopya stehen hast und im HTML Code kopya dann sind das zwei verschiedene Dinge.

Gruss
Elroy
 
Space Vampire schrieb:
Nun ist genug mit vorkauen.
Beschäftige dich bitte mit CSS grundlagen.
Insbesondere mit float und clear
Versuche eine Lösung und wenn du dabei auf Probleme stößt zeig unss den Code
Zum Vergrößern anklicken....

Ich habe eine Frage.. Danke dein Code hat mir gut geholfen.. aber kann man es so einstellen das es nur Horizontal in der Mitte liegt und vertical von oben anfängt?
 
Werbung:
Natürlich!
Lass die Class .vtcl_align weg und entferne den dazugehörigen Container. ;)
Für Abstand nach oben nutze dann die eigenschaft margin-top
 
Also das (div.vtcl_align{) und (<div class="vtcl_align"></div> ) das soll ich entfernen?
Dies habe ich getan aber funktioniert irgendtwie nicht :/
 
Werbung:
HomepageTerror schrieb:
Also das (div.vtcl_align{) und (<div class="vtcl_align"></div> ) das soll ich entfernen?
Dies habe ich getan aber funktioniert irgendtwie nicht :/
Zum Vergrößern anklicken....

Ich weiss nicht wo du die entfernt hast, aber in deinem aktuellen Code sind die noch immer drin.
Irgendwie klar das es so nicht funktionieren kann.

Gruss
Elroy
 
Nein, stimmt es ist in dem Code nicht entfernt aber das auf meinem Pc (DATEI) ist es entfernt aber trotzdem klappt es nicht kann ich auch gern online stellen :)
Tut mir leid..

Seite: %titel%
 
Werbung:
Auf welches Element wendest du den Abstand denn an? Auf .wrapper?
Da funktionierts nämlich.
Du darfst nur nicht margin-top vor margin:0 auto; setzen.
Am besten so etwa:
Code: 
margin: 50px auto 0 auto;
Dann geht es
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben