How to center with CSS?!
LTD 05.10.2008 - 11:23 2271 18
LTD
frecher fratz
|
So und hier die nächste Frage auf die ich keine Antwort finde. Auf meiner Seite ist es mir unmöglich die Bilder zu zentrieren. Egal was ich versuche, die Popup Bilder kommen IRGENDWO. Anbei das CSS... vielleicht fängt jemand was damit an =) #filter
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#191919;
z-index:10;
opacity:0.85;
filter: alpha(opacity=50);
}
#box
{
position:fixed;
display: none;
width:100%;
height:100%;
background:none;
z-index:11;
}
#boxcontent
{
position:fixed;
left:8%;
top:8%;
overflow:hidden;
width:100%;
height:100%;
}
Das Problem is halt relativ offensichtlich: Je nach Auflösung erscheint das Popup irgendwo und ich kann es nicht verschieben/scrollen. Dh ich müsste entweder eine einheitliche Größe korrekt mittig plazieren, oder eine variable Größe -> wobei ich überhaupt keinen Tau habe wie man das realisiert, mit auto gehts schonmal nicht ;/. http://www.markusklug.com -> photography -> irgendwas anklicken
|
Spikx
My Little Pwny
|
Das Bild ist eh mittig. Das div in dem das Bild ist jedoch nicht 
|
LTD
frecher fratz
|
Das Bild ist eh mittig. Das div in dem das Bild ist jedoch nicht Kannst du das nem CSS-Noob wie mir erklären? Ich habe schon versucht in jedes DIV ein "style=align:center;" und co ein zu bauen, ohne Erfolg. Das zweite Bild kommt stets irgendwo rechts aussen im IE bzw. ganz links im Safari. Und der Rahmen rund ums Bild funktioniert auch net, da sollte 1px schwarzer Rahmen sein =). Schalte ich den ein, habe ich allerdings den Rahmen aufs ganze Fenster gestreckt (nur horizontal)...
|
Spikx
My Little Pwny
|
Egal, du hast sowieso mehr Probleme  . Du hast bspw. <!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>Main Menu</title>
<link type="text/css" rel="stylesheet" href="lightbox-image.css">
<script src="ajax.js" type="text/javascript"></script>
<script src="lightbox-fade.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #191919;
margin-top: 8%;
}
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default
fonts size, they are more unpredictable. Used correctly, they are also
more accessible for those that need larger fonts size since the line length
remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body
element. If you decrease the text size overall by using a font-size: 80%
on the body element or the #container, remember that the entire layout
will downsize proportionately. You may want to increase the widths of
the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on
the overall design (ie: #sidebar1 is given a 70% font size and
#mainContent is given an 85% font size), this will proportionately change
each of the divs overall size. You may want to adjust based on your final
font sizing.
*/
.oneColElsCtrHdr #container {
width: 46em; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment
of the elements in the divs that appear beneath it. If an image is used in
the #header instead of text, you may want to remove the padding. */
}
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header
div will avoid margin collapse - an unexplainable space between divs. If
the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to
keep the element away from the edges of the div */
}
.oneColElsCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
}
.oneColElsCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
body,td,th {
color: #666666;
}
.style10 {font-size: 11px; color: #666666; }
.style12 {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
}
.style13 { color: #737373
}
.style22 {
color:#333333;
font-size: 11px;
}
.style7 {font-size: 18px}
.style9 {color: #666666}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
color: #999999;
text-decoration: none;
}
a:hover {
color: #AE0000;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style14 {
color: #CCCCCC;
font-weight: bold;
}
a img {
border:none;
}
.style15 {font-family: Arial, Helvetica, sans-serif}
.style16 {font-size: 11px; color: #666666; font-family: Arial, Helvetica, sans-serif; }
-->
</style></head>
<body class="oneColElsCtrHdr">
<div id="filter"></div>
<div id="box">
<div id="boxcontent" onclick="closebox()"> </div>
</div>
doppelt.
|
LTD
frecher fratz
|
Ja was weiß ich was Dreamweaver da für lustige Zeilen einfügt - jedes mal wenn ich ne Schrift änder, macht er das.
Wo habe ich da etwas doppelt? Oder ist das alles doppelt?!
|
Spikx
My Little Pwny
|
Die Seite fängt mit dem oben genannten html code an... und dann kommt der selbe code nochmal, bevor der restliche content beginnt. Das meine ich mit doppelt.
|
LTD
frecher fratz
|
Die Seite fängt mit dem oben genannten html code an... und dann kommt der selbe code nochmal, bevor der restliche content beginnt. Das meine ich mit doppelt. Ah okey danke, hatte 2x den header included... wie ich das mit dem DIV lösen kann weißt du nicht, oder?
|
jives
And the science gets done
|
Rahmen ums Bild: Bild in ein eigenes div mit Rahmen packen. Bild zentrieren: Im div, das dann das div fürs Bild enthält das probieren: width: 100%; height: 100%;
und im Bild-div: margin: auto;
|
Spikx
My Little Pwny
|
Ah okey danke, hatte 2x den header included... wie ich das mit dem DIV lösen kann weißt du nicht, oder? As jives said. Btw., wieso verwendest du frames?
|
ica
hmm
|
@ltd: lad dir html validator und firebug für firefox runter. erstens siehst du gleich ob du korrektes xhtml schreibst (ist schon mal ein erster schritt richtung browser kompatiblität) und zweitens kannst du mit firebug recht einfach css on the fly ändern.
|
LTD
frecher fratz
|
@spike sind keine frames in verwendung
@ica geht klar, werd ich mal aprobieren
|
prayerslayer
Oar. Mh.
|
|
Spikx
My Little Pwny
|
|
LTD
frecher fratz
|
Doch, du verwendest frames. Aber ich denke mal du willst damit kaschieren, dass die website tatsächlich auf http://markusklug.macbay.de liegt und nicht http://www.markusklug.com/ Nochmal - ICH verwende keine Frames. Wozu sollte ich die URL kaschieren?! Wie auch immer - das CSS-Problem besteht nach wie vor und ich hab jetzt keine Ideen mehr.
|
that
Hoffnungsloser Optimist
|
Nochmal - ICH verwende keine Frames. OK - DEINE Webseite verwendet Frames. Wozu sollte ich die URL kaschieren?! Das musst doch du wissen. 
|
Anmeldung