Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 18.11.2009, 01:21
Benutzerbild von Liquid
Liquid Liquid ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2009
Beiträge: 3
Liquid befindet sich auf einem aufstrebenden Ast
Standard Ein paar Fragen

Hallo ihr CSS Gurus...

Ich bastle schon seit einigen Wochen an meiner neuen Seite für meine fotografischen Projekte. Offiziell läuft eigentlich schon alles, inoffiziell bin ich jedoch bei einem benutzen CSS Code eines Templates für die Software "Pixelpost" zunehmend unzufriedener gewesen.

Inzwischen habe ich den ganzen Code von vorne geschrieben und eigentlich sieht fast alles schon so aus wie ich es mir vorstelle. Nur an Kleinigkeiten und etwas Verständnis hapert es derzeit bei mir. In den FAQ zum Thema CSS und Ausrichtungen habe ich schon tolle Anregungen und Tipps gefunden, doch binde ich sie ein, tut sich nichts oder mein Layout ist zerschossen.

Aber lieber nun mal der Reihe nach...

Meine Testumgebung läuft unter der Adresse: http://motivhimmel.de/spielwiese
Der Benutzername ist MOTIVHIMMEL und das Passwort motivhimmel, also um die Seite zu erreichen.

1. Für meinen Aufbau der Seite habe ich eine Hauptbox erstellt, die ich "main_wrap" gennant habe. Sie hat eine Breite und Höhe von 100%, damit die Seite immer voll gefüllt ist und der Hintergrund auch jederzeit zu sehen ist. Innerhalb des "main_wrap" habe ich eine weitere box angelegt für den header und anschließend für den content. Aktuell ist die Box "content" auf der Spielwiese gelb umrandet und somit gut zu erkennen, denn genau darum dreht sich meine erste Frage. Ich würde gerne erreichen das diese Box eine größere Höhe ausnutzt. Eigentlich dachte ich, ich pack das auf 100%, doch leider wird diese Angabe komplett ignoriert. Das Fenster passt sich weiterhin automatisch auf den Inhalt an. Gebe ich einen festen Wert in Pixel an, wird dieser hingegen genutzt. Aktuell habe ich die Höhe als "auto" definiert.

2. Nach der "content" box soll noch ein footer erscheinen, etwa 100 Pixel hoch. Ich habe in der FAQ von einem Kniff gelesen, dass man so einen Footer so einrichten kann, dass er arti an der unteren Browserkante kleben bleibt. Ich habe da mal ein wenig rumexperimentiert, jedoch absolut erfolglos. Des weiteren weiß ich auch nicht, wie ich das ganze dann in einen gemeinsamen Nenner mit dem "content" bringen kann oder überhaupt sollte.
Kurzum... Die "mitte" soll variabel sein und sich auf die Höhe des Betrachters, während der Footer unten bleiben soll oder eben via Scrollen erreichbar wird.

3. Als letztes komme ich nicht so ganz klar mit der Thumbnailnavigation. Ich würde sie am liebsten mit einem gewissen Abstand zum obigen Inhalt platzieren können, jedoch komme ich leider in Konflikt mit den beiden angelegten Boxen für das Bild und den Text. Vorhin habe ich es immerhin mal geschafft, den Abstand zur linken Box (Bildbereich) zu erhöhen. Wird das Bild aber schmal (Panoramabilder), klebt die Navigation ggf. am Ende der linken Beschreibung wie man hier sehen kann: http://motivhimmel.de/spielwiese/ind...?showimage=100
Achja, die optimalste Darstellung wie ich sie gerne "fix" hätte, währe in diesem Zustand: http://motivhimmel.de/spielwiese/index.php?showimage=93. Hier gefällt mir der Abstand zum Bildende und der darunterliegenden Thumbnailauswahl.

4. und letzte Frage... Bei vertikalen Bildern habe ich es lustiger weise ganz schnell hinbekommen, dass das Bild mittig positioniert wird dank der FAQ hier im Forum, wohingegen ich es bei den horizontalen Bildern überhaupt nicht hinbekomme obwohl in den FAQ steht, dies sei ganz einfach mittels vertical align zu erledigen. Dieser Punkt ist aber nicht so wichtig, aber vielleicht hat ja jemand spontan den richtigen Tipp.

Ich hoffe ihr zerpflückt mich für mein CSS gecode nicht zu sehr
Achja und es geht aktuell nur um die Startseite mit den Bildern. Die anderen Seiten werden aufgrund der kompletten CSS Neugestaltung derzeit nicht korrekt angezeigt.

Vorab natürlich schon einmal vielen Dank an die Helfer...


Hier das CSS:
Code:
/* MASTER */

body, html, form  {
	background-image:url(../images/wood.jpg);
	color:#8A8A8A;
	font-family: Verdana, Arial, Tahoma;
	margin: 0px;
	padding: 0px;
	height: 100%;
	/* border: 3px dashed blue; */
}

h1 {
	font-weight: normal;
	color:#8A8A8A;
	font-size: 1.5em;
	margin-top:0px;
}

h2 {
	font-weight:normal;
	color:#8A8A8A;
	font-size: 1.0em;	
	margin-top:0px;
}

h3 {
	font-weight:normal;
	color:#8A8A8A;
	font-size: 0.7em;
	margin-top:0px;
}

* { outline:none; }
img { border: 5px solid #ffffff; }

a:link, a:visited {
	color:#006BC2;
	text-decoration:none;	
}
a:hover {
	color:#000;
	background-color:#006BC2;
}


/* HAUPTCONTAINER */

#main_wrap {
	margin: 0px auto;
	height: 100%;
	width: 100%;
}

/* KOPFZEILE */ 	
#header_bg {
	width:100%;
	height:auto;
	background: url(../images/header_bg.jpg) repeat-x;
	border-bottom: 1px solid #8A8A8A;
}

#header_design {
	width:950px;
	height:100px;
	margin:0 auto;
	font-size:small;
	position:relative;
	background: url(../images/logo.jpg) no-repeat;
}

#header_menu {
	position:absolute;
	right: 0px;
	bottom: 5px;
}

/* KOPFZEILE MENUELAYOUT */

ul#nav {
	list-style:none;
	margin:0;
	padding:0;
}
ul#nav li {
	margin: 0;
  	border: 0 none;
  	padding: 0;
  	float: left; /*For Gecko*/
  	display: inline;
  	list-style: none;
  	position: relative;
  	height: auto;
	}
ul#nav li a:link, ul#nav li a:visited {
	display:block;
	float:left;
	color:#CCC;
	margin-left:10px;
	text-decoration:none;
	line-height:20px;
}
ul#nav li a:hover {
	color:#EEE;
	background:none;
}

/* KOPFZEILE UNTERMENUEDESIGN */

ul#nav li:hover ul {
	display:block;
}
ul#nav  ul {
	display:none;
	position:absolute;
	z-index:10;
	top:18px;
	right:-11px;
	width:150px;
	background-color:#000;
	border:1px solid #222;
	margin:0;
	padding:0;
	list-style:none;
}
ul#nav ul li {
	width:150px;
	float: left; /*For IE 7 lack of compliance*/
    display: block !important;
    display: inline; /*For IE*/
	padding:0;
	margin:0;
}
ul#nav ul li a:link, ul#nav ul li a:visited {
	display:block;
	background-color:#111;
	margin:0;
	padding:3px 10px;
	float:none;
	text-align:right;
	}
ul#nav ul li a:hover {
	background-color:#006BC2;
	color:#000;
	
}

/* INHALT */

#content {
	width:950px;
	height:auto;
	margin:0 auto;
	border: 1px dotted orange;
	padding-top: 15px;
}

#description { 
 	float: right; width: 380px;
 	border-left: 1px #ddd dotted;
}
#description_content {
	padding: 0 20px 0 10px; 
}

#image { 
    width: auto; margin: 0 380px 0 0;
}
#image_content {
	padding: 0 10px 0 20px;
	margin-top: auto;
	margin-bottom: auto;
}

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 600px;
    height: auto;	
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/

#thumbnails_bg {
	clear:both;
	background: url(../images/thumbnail_bg.png) no-repeat; 
}

#thumbnails{
	height:  142px;
	witdh: 950px;
}

#thumbnails img{
	padding: 22px 0 0 31px;
	border-style: none;
	border: 0;	
}

#thumbnails a:link, a:visited, a:hover {
	text-decoration:none;	
}
/* FUSSZEILE */

Und das was ich im HTML verzapft habe
Code:
<div id="main_wrap">

    <!-- HEADER -->
    <div id="header_bg">
        <!-- MENUELINKS -->
        <div id="header_design">
            <div id="header_menu">
		  <ul id="nav">
			<li><a href="<SITE_URL>">STARTSEITE</a></li>
			<li><a href="index.php?x=browse&pagenum=1" id="browseLink">KATEGORIEN</a>
				<PIXELUTION_CATEGORIES_MENU>
			</li>
			<li><a href="index.php?x=about" id="aboutLink">&Uuml;BER</a></li>
            <li><a href="http://motivhimmel.de/gb/" class='lightview' title=":: Hier können Sie gerne Ihre eigene Meinung zu  MOTIVHIMMEL niederschreiben :: width:600, height:500, menubar:false, topclose:true">G&Auml;STEBUCH</a></li>
		</ul>
            </div>
        </div>
        <!-- /MENUELINKS -->
    </div>
    <!-- /HEADER -->

<!-- /Hauptcontainer (100% x 100% groesse) -->

<!-- INHALT -->
    <div id="content">
        <div id="description">
            <div id="description_content" class="clearfix">
                <h1><IMAGE_TITLE></h1>
                <p><IMAGE_NOTES></p>
            </div>
        </div>
        <div id="image">
            <div class="wraptocenter">
            <!--[if lt IE 8]><style>
            .wraptocenter span {
            display: inline-block;
            height: 100%;
            }
            </style><![endif]-->
                <div id="image_content" class="clearfix">

                    <a href="images/<IMAGE_NAME>" class="lightview" title='<IMAGE_TITLE> :: :: topclose: true'><img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" id="photo" style="width:<PIXELUTION_IMAGE_WIDTH>px; height:<PIXELUTION_IMAGE_HEIGHT>px;" /></a><br><br>
                    <h3>Klicken Sie bitte auf das Bild, um es zu vergr&ouml&szlig;ern</h3>

                </div>
                <!-- IE Column Clearing -->
                <div id="ie_clearing">   </div>
            </div>
        </div>
        <!-- THUMBNAILS -->
        
            <div id="thumbnails_bg">
                <div id="thumbnails">
                <IMAGE_THUMBNAIL_ROW_REV>
                </div>	
            </div>
        
        <!-- /THUMBNAILS -->
    </div>
<!-- /INHALT -->
Mit Zitat antworten
Sponsored Links