zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ein paar Fragen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.11.2009, 00:21
Benutzerbild von Liquid
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
  #2 (permalink)  
Alt 18.11.2009, 06:40
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

1 und 2: Da hätte ich eine andere Anleitung für dich, wo auch auf das mit den 100% eingegangen wird.

3. Ein entspr. margin-top für #thumbnails_bg schiebt die Thumbs nach unten.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.11.2009, 09:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 25.07.2009
Ort: Wanne-Eickel
Beiträge: 223
TanjaP. befindet sich auf einem aufstrebenden Ast
Standard

Schau mal bei mir auf die Seiten, ich habe da einiges, mit festem Footer und die thumbs ausgerichtet. Evtl. ist ja was dabei. Undercover-Coon's und die dazugehörige css http://www.undercover-coons.de/hp/css/undercover1.css

Tanja
Mit Zitat antworten
  #4 (permalink)  
Alt 18.11.2009, 13:27
Benutzerbild von Liquid
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2009
Beiträge: 3
Liquid befindet sich auf einem aufstrebenden Ast
Standard

Ich glaube die Tipps von hubspe werden mit gut weiter helfen. Sieht logisch aus und scheint mein Problem zu beseitigen. Hoffe ich jedenfalls

Muss mal später noch ein wenig weiter basteln. Derzeit zieht sich die Seite unten noch zu weit. Evt. beißt sich da was mit einem anderen Tag.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.11.2009, 20:48
Benutzerbild von Liquid
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2009
Beiträge: 3
Liquid befindet sich auf einem aufstrebenden Ast
Standard

Also es hat alles so weit geklappt und funktioniert. Bin begeistert. Danke noch einmal an die Tippgeber.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ein paar Fragen Nora CSS 6 18.02.2010 17:41
Ein paar leichte Fragen! disem CSS 2 18.06.2008 20:49
Paar kleine Fragen! ONeill Barrierefreiheit 10 30.06.2006 11:47
Ein paar Fragen im allgemeinen! Pumpkin Offtopic 2 14.08.2005 13:22
Ein paar Fragen eines CSS-Newbie (Textausrichten, etc) das.prov CSS 21 06.02.2005 20:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:02 Uhr.