How to center with CSS?!

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/how_to_center_with_css_200319/page_1 - zur Vollversion wechseln!

LTD schrieb am 05.10.2008 um 11:23

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 =)

Code: PHP

#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 schrieb am 05.10.2008 um 11:32

Das Bild ist eh mittig. Das div in dem das Bild ist jedoch nicht

LTD schrieb am 05.10.2008 um 11:35

Zitat von Spikx
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 schrieb am 05.10.2008 um 11:40

Egal, du hast sowieso mehr Probleme . Du hast bspw.

Code: PHP

<!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 schrieb am 05.10.2008 um 11:43

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 schrieb am 05.10.2008 um 11:44

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 schrieb am 05.10.2008 um 11:57

Zitat von Spikx
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 schrieb am 05.10.2008 um 12:20

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:

Code:

width: 100%; height: 100%;

und im Bild-div:

Code:

margin: auto;

Spikx schrieb am 05.10.2008 um 12:35

Zitat von LTD
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 schrieb am 05.10.2008 um 13:05

@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 schrieb am 05.10.2008 um 13:44

@spike sind keine frames in verwendung
@ica geht klar, werd ich mal aprobieren

prayerslayer schrieb am 05.10.2008 um 13:49

zum schluss dann noch http://validator.w3c.org

Spikx schrieb am 05.10.2008 um 19:53

Zitat von LTD
@spikx sind keine frames in verwendung

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/

LTD schrieb am 05.10.2008 um 22:03

Zitat von Spikx
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 schrieb am 05.10.2008 um 22:10

Zitat von LTD
Nochmal - ICH verwende keine Frames.

OK - DEINE Webseite verwendet Frames.

Zitat von LTD
Wozu sollte ich die URL kaschieren?!

Das musst doch du wissen.