CSS/HTML frage

S0ulB0w · 15. April 2011

Hey,
ich kriegs iwie nicht hin den #container mittig der Homepage zu kriegen.
weiß einer was ich in die .css reinschreiben muss?
Das will ich machen..

enkor16 · 15. April 2011

bei mir is der Container mit css in der mitte

mein CSS code für den Container sieht so aus

Code

#content {
float:left;
width:470px;
background-color: #ACACAC;
overflow: auto;
max-height: 500px;
background-image: url(menu/container_main.png);

Mfg vill hilfs ja

FragSalat · 15. April 2011

enkor16 verändere mal deine Auflösung sieht dann gut aus

willst du den statisch horizontal und vertikal in der mitte haben? oder nur in der horizontale mittig?

denn würdest du den auch in der vertikale mittig ahben wollen würde das beim scrollen nicht mehr mittig sein...

enkor16 · 15. April 2011

Sick^ schrieb:

enkor16 verändere mal deine Auflösung sieht dann gut aus

willst du den statisch horizontal und vertikal in der mitte haben? oder nur in der horizontale mittig?

denn würdest du den auch in der vertikale mittig ahben wollen würde das beim scrollen nicht mehr mittig sein...

was für eine Auflösung ?

Mfg

FragSalat · 15. April 2011

deine bildschirmauflösung

du hast deine container anhand deiner auflösung ausgerichtet mit float: left nahc links ngeklatscht und dann in die mitte geschoben

Edit: vergessen zu sagen wie dus besser amchen kannst^^ mit margin:auto; ist dein container mittig ausgerichtet bei jeder auflösung

S0ulB0w · 15. April 2011

Sick^ schrieb:

margin:auto

geht nicht....

hier mal mein code.

#container {
width:800px;
height:850px;
position:absolute;
margin:auto;
}

// Edit: Sick ich will den Vertikal in der mitte haben, denn ich hab noch ein #header den ich dann in die Mitte von #container packe

enkor16 · 15. April 2011

Hier mal mein CSS code von meine HP

http://www.djcuebaseexample.de.gp

Code

html, body
#hintergrund {
position:absolute;
width:100%;
height:100%;
z-index:-1;
}
#container {
margin:auto;
width: 760px;
background: #000000;
}
#header {
background: #000000;
width: 830px;
height: 220px;
background-image: url(menu/footer.png);
}
#leftBar {
float: left;
width: 180px;
height: 500px;
background: #000000;
background-image: url(menu/left_bg.png);
}
#content {
float:left;
width:470px;
background-color: #454545;
overflow: auto;
height: 500px;
}
#rightBar {
float:right;
width: 180px;
height: 500px;
background: #EBEBEB;
background-image: url(menu/left_bg.png);
margin: -70px;
margin-top: 0px;
}
#footer {
clear:both;
background:#000000;
width: 830px;
background-image: url(menu/footer.png);
}

Alles anzeigen

Vielleicht hilft der das
um deine Homepage bzw. container in die mitte zu machen

Mfg

JustChill · 15. April 2011

setz alle divs die du mittig hast in ein div rein geb dem ne id und setz den dann auf margin: 0 auto;
und geb jedem noch ne bestimmte breite die du haben willst

FragSalat · 15. April 2011

das liegt an position absolute....

also das beste was mir einfällt ist
left: 50%; margin-left: -100px; wobei -100px die hälfte der breite des containers ist....

S0ulB0w · 15. April 2011

habs mittlerweile hinbekommen, ging aufeinmal als ich position:absolut weggemacht habe
wozu dient position:absolut eig richtig?

dankeee

berndorin · 15. April 2011

mit postion:absolut kann man ein festes Seitenlayout erstellen, dh., es verändern sich die größe der Seite nicht, wenn man den Browser vergrößert verkleinert.
Man muss dort auch für jeden container die postion berechnen

S0ulB0w · 15. April 2011

ok next question..

sagen wir ich hab ein Bild und will drauf ein bereich als link benutzen(ne art Navigation)
woher krieg ich jetzt die Pixel dieses bereiches?

Skizze:

enkor16 · 15. April 2011

mach es so z.B

Code

<div id="leftBar"><center><br />
<a href="index.html"><img src="button/home1.png"
onmouseover="this.src='button/home2.png';"
onmouseout="this.src='button/home1.png';" /></a>
<br />
<a href="news.html"><img src="button/news1.png"
onmouseover="this.src='button/news2.png';"
onmouseout="this.src='button/news1.png';" /></a>
<br />
<a href="videos.html"><img src="button/video1.png"
onmouseover="this.src='button/video2.png';"
onmouseout="this.src='button/video1.png';" /></a>
<br />
<a href="partner.html"><img src="button/partner1.png"
onmouseover="this.src='button/partner2.png';"
onmouseout="this.src='button/partner1.png';" /></a>
<br />
<A HREF="http://www.onlinewebservice6.de/gastbuch.php?id=153644"><img src="button/gbuch1.png"
onmouseover="this.src='button/gbuch2.png';"
onmouseout="this.src='button/gbuch1.png';" /></a>
</div>

Alles anzeigen

das hier: <a href="partner.html"><img src="button/partner1.png" /> ist ein Button Bild von mir

und setzt du darunter

<br />
dann geht es ein runter
und das amchst du so oft wie du die Button halt auseinander haben willst....

siehe meine HP:

www.photoshopgertuts.de
link die Button hab ich so gemacht

blos bei mir sind es für 1 Button 2 Bilder normale und wenn man maus drauf macht blink es auf.

Mfg

S0ulB0w · 15. April 2011

enkor16 schrieb:

mach es so z.B

Code

das hier: ist ein Button Bild von mir

und setzt du darunter

dann geht es ein runter
und das amchst du so oft wie du die Button halt auseinander haben willst....

siehe meine HP:www.photoshopgertuts.de
link die Button hab ich so gemacht

blos bei mir sind es für 1 Button 2 Bilder normale und wenn man maus drauf macht blink es auf.

Mfg

Alles anzeigen

ich hab aber nur 1 Bild und darauf mehrere Bereiche wie z.B

Home
Download
Impressum

das alles auf 1 Bild.
Ich muss also einen Bereich sozusagen makieren z.b den Home bereich und den dann mit einmel Link versehen.

enkor16 · 15. April 2011

aso

glaub das geht net
weil dann muss man ja mit HTML oder CSS das bild zerschneiden was nun mal net geht

Mfg

S0ulB0w · 15. April 2011

enkor16 schrieb:

aso

glaub das geht net
weil dann muss man ja mit HTML oder CSS das bild zerschneiden was nun mal net geht

Mfg

enkor16 · 15. April 2011

S0ulB0w schrieb:

mh... du arbeitest mit Dreamweaver
finde Dreamweaver mist

ich arbeite mit dem kostenlosen Programm Webocton - Scriptly

mfg

S0ulB0w · 15. April 2011

ja aber wie du´s siehts gehts ja ne....
meine frage bleibt wie mach ich das?

FragSalat · 15. April 2011

also zum thema position:absolute ... das heißt das der container absolut vom browser fenster positioniert wird ohne den anden webseitencontent zu beachten...

zum button

also wenn du es unbedingt so machen willst das du nur den bestimmten bereich eines bildes als button haben willst ohne hover oder clicked oder active effekte dann nimmst du einen lehren container setzt die größe mit width und height und positionierst ihn einfach über dem bild mit margin und setzt einen link auf den container

also <a href=""><div... ></div></a>

besser ist es aber wenn du das anders machst^^

es gibt die variante das du ein bild mit allen buttons in jedem zustand machst und dann das bild als background in nem container nimmst und jeweils nur ein teil des bildes oder du machst für jeden button und seine staten ein eigenes bild und dann via #container:hover oder active oder clicked

ich bevorzuge inzwischen die variante mit einem bild für alle buttons....

MfG Sick^

S0ulB0w · 16. April 2011

Habs schon

Teilen