zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abstand eines Elementes lässt sich nicht verringern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.04.2009, 15:01
Benutzerbild von zeitweise
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.04.2009
Beiträge: 2
zeitweise befindet sich auf einem aufstrebenden Ast
Standard Abstand eines Elementes lässt sich nicht verringern

Liebe CSS-Profis,

ich passe gerade Stylesheets in einer Wordpress-Installation mit NextGen-Galerie-Plugin an.

Folgendes Problem bekomme ich seit Tagen nicht gelöst:
Album 2 Gallery 2 Galleries — Hugs and Kisses

Die Slideshow ordnet sich konsequent mit großem Abstand zur Oberkante bzw. unter der #sidebar an. Soweit ich sehen kann, könnte es mit der Klasse .ngg-galleryoverview zu tun haben. Nur den Fehler finde ich nicht. Weiß jemand Rat? Das würde mich überglücklich machen. Bin inzwischen etwas verzweifelt.

Vielen Dank!

Folgendes steht in meinem style.css:

Code:
/*

Theme Name: Blass2
Theme URI: http://1000ff.de/wordpress-theme-blass-english-version/
Description: Elegant and simple. Blass2 is a CSS-only theme, has a widgetized sidebar, support for gravatars, and works nicely with WordPress 2.5+. Brought to you by <a href="http://1000ff.de/">1000ff</a>.
Version: 1.6.2
Tags: fixed width, two columns, widget ready, widgets, right sidebar, simple, white, clean, valid CSS, valid XHTML
Author: 1000ff
Author URI: http://1000ff.de/

*/

/* body
--------------------------------------------------*/
body {
font:62.5%/1.6em helvetica, sans-serif;
color:#fff;
margin:0;
background:black;
text-align:left;
}

* {
margin:0;
padding:0;
}

code {
font:120% helvetica, sans-serif;
}

h2 {
	font-family:helvetica, sans-serif;
	}

/* header
--------------------------------------------------*/
#header {
border-top:30px solid #fff;
}

#header .description {
float:right;
color:#333;
margin:45px 0 0;
}

#header h1 {
border-bottom:3px solid #EFF8FB;
margin:15px 0 0;
padding:25px 25px 40px 0;
}

#wrapper {
width:760px;
margin:0 auto;
}

#wrapper img {
	border:0px;
	}

/* header h1 (blogtitle)
--------------------------------------------------*/
#header h1 {
font-family: helvetica, sans-serif;
font-size:3.8em;
font-weight:400;
color:#333;
letter-spacing:-1px;
margin:20px 0;
}

#header h1 a {
text-decoration:none;
color:#333;
}

/* navigation

#nav {
border-bottom:3px solid #EFF8FB;
height:25px;
margin:0;
padding:15px 0;
}

#nav li {
float:left;
list-style:none;
padding:0 10px 0 0;
}

#nav li a {
color:#999;
background:#fff;
font:1.6em helvetica, sans-serif;
font-weight:400;
text-decoration:none;
display:block;
margin:1px 2px 0 0;
padding:5px;
}

#nav li a:hover {
background-color:#EFF8FB;
color:#000;
text-decoration:none;
}

#nav li a.active {
background-color:#eee;
color:#444;
text-decoration:none;
}

.clear {
clear:both;
}
--------------------------------------------------*/


/* content
--------------------------------------------------*/


#content, #content2 {
margin:0 190px 0 0 !important;
padding:0px 20px 10px 10px;
}

/* content2

#content2 {
margin:0 !important;
padding:10px 0 0px;
}
___*/

#content, #content p {
line-height:19px;
font-size:120%;
word-spacing:1px;
margin:15px 0;
color:black;
}

#content a,#content2 a {
text-decoration:underline;
font-weight:bold;
color:black;
padding:2px 3px 2px 3px;
}

#content a:hover,#content2 a:hover {
background-color:#000;
color:#fff;
text-decoration:none;
padding:2px 3px 2px 3px;
}

#content h2, #content2 h2 {
font-weight:400;
line-height:30px;
margin:10px 0;
}

#content h2 a,#content2 h2 a {
text-decoration:none;
border:none;
padding:0px 0 !important;
}

#content2 a, h2, p {
	color:#fff;
	}


#content .pagetitle, #content2 .pagetitle {
	color:red;
	padding:10px;
	}

#content h1 {
font:3em helvetica, sans-serif;
color:#222;
margin:10px 0;
}

#content h3 {
font:2em helvetica, sans-serif;
color:#222;
margin:10px 0;
}

#content h4 {
font:1.4em helvetica, sans-serif;
margin:10px 0;
}

#content h5 {
	font:1.6em helvetica, sans-serif;
	color:#222;
	margin:10px 0;
	}


#content ul,ol {
	font-size:120%;
	margin:10px 10px 10px 25px;
	}

#content2 h3 {
	font:160% helvetica, sans-serif;
	padding:10px 0px 0px 0px;
	color:#fff;
	margin:10px 0;
	}

#content2, #content2 p {
	line-height:19px;
	font-size:120%;
	word-spacing:1px;
	margin:15px 0;
	color:#fff;
	}

#content2 .size-thumbnail {
	margin:10px 10px 10px 0;
	vertical-align:text-bottom;
	
	}

#content2 ul,ol {
margin:10px 10px 10px 25px;
}

#content3 {
	background:black;
	color:white;
	margin:0 190px 0 0 !important;
	padding:0px 20px 10px 10px;
	}

#content3 p {
	font:1.2em helvetica, sans-serif;
	margin:10px 0;
	word-spacing:1px;
}
	}

#content3 h2 {
font-weight:400;
line-height:30px;
margin:10px 0;
padding:0px 0;
}

#content3 img, #content2 img {
	padding:5px;
	margin:3px;
	}


.clear {
clear:both;
}


.ngg-imagebrowser h3 {
	text-align:center;
	color:#fff !important;
}

/* nextgen gallery

--------------------------------------------------*/

.ngg-galleryoverview {
	padding:0px;
	margin:0px;
	}

.ngg-galleryoverview a, .ngg-galleryoverview a:hover {
	font: 1.2em helvetica, sans-serif;
	font-weight:normal !important;
	line-height:18px;
	word-spacing:2px;
	padding:2px !important;
	margin:15px 0;
	text-decoration:none;
	}


.ngg-albumoverview {
	margin:10px;
	}
	
.ngg-album {
	border:0px;
	}

.ngg-albumoverview a, .ngg-albumoverview a:hover {
	padding:2px !important;
	text-decoration:none !important;
	}
.slideshowlink {
	align:right;
	}


/* blockquote + links
--------------------------------------------------*/

blockquote {
background:#EFF8FB;
border:1px solid #ccc;
margin:10px 0;
padding:5px 15px;
}

a:hover {
color:#000;
text-decoration:underline;
background-color:#fff;
}

a.more {
display:block;
text-align:right;
color:#2F460D;
text-decoration:none;
margin:10px 0 0;
}

a.more:hover {
text-decoration:underline;
}

/* exerpts
--------------------------------------------------*/
.imgtfe {
	margin:0 15px 5px 0;
	}

/* metadata under post
--------------------------------------------------*/

#content .post {
	background:white;
	padding: 10px;
	}

.post {
margin:0 0 10px 0;
}

.pagetitle {
	background:#fff;
	}

.post img {
background:#ccc;
border:5px solid #eee;
}

#content .post .info {
display:none;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
background-color:#EFF8FB;
font-size:1em;
color:#333;
padding:2px 3px 3px 8px;
margin: 25px 0;
}

.date {
display:none;
margin: 0 0 15px 0;
}

.post small {
margin-top:25px;
}

.nocomments {
	display:none;
	}
	
#content p a {
	background:#fff;
	}



/* metadata sidebar ('about this post') - ausgeblendet
--------------------------------------------------*/
p.news {
display:none;
background:#EFF8FB;
color:#333;
font-size:120%;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
margin:10px 0 28px;
padding:10px;
}

/* sidebar
--------------------------------------------------*/
#sidebar {
width:160px;
float:right;
padding:15px 10px 10px 10px;
height:100%;
}

#sidebar h2 {
display:none;
letter-spacing:1px;
font-size:1.6em;
color:#fff;
padding:0 0 3px;
}

#sidebar ul {
list-style:none;
margin:0 0 10px;
}

#sidebar li {
list-style:none;
padding:3px;
font-size:120%;
}

#sidebar li a:hover {
color:#000;
background-color:#EFF8FB;
}

#sidebar input {
width:102px;
background:#fff;
color:#444;
border:1px solid #eee;
font:11px helvetica, sans-serif;
padding:3px;
}

#sidebar input:focus {
background:#fff;
border:1px solid #eee;
}


/* some input
--------------------------------------------------*/
input {
border:1px solid #CCC;
font:11px helvetica, sans-serif;
padding:3px;
}

input:hover {
border:1px solid #262626;
}

input:focus {
border:1px solid #262626;
color:#333;
}

/* comments
--------------------------------------------------*/
#comments {
font-size:1.4em !important;
color:#eee !important;
padding:5px 0 0 0;
}

#respond {
	color:#fff !important;
	}

#content #commentlist li {
margin-bottom:1.5em;
padding-bottom:1em;
}

#content .commentlist, #small p {
background-color:#ccc;
padding:5px;
margin:0px;
}

#commentform {
padding: 2px 0 2px 10px;
background:#ccc;
width:auto;
text-align:left;
margin:0 0 15px 0;
}

#commentform textarea {

background:#f8f7f6;
border:1px solid #d6d3d3;
width:480px;
font: 13px helvetica, sans-serif;
}

#commentform #email,#commentform #author,#commentform #url {
font-size:1.1em;
background:#f8f7f6;
border:1px solid #d6d3d3;
width:350px;
}

#commentform input {
margin-bottom:3px;
}

#gravatar {
align:right;
}

/* wp stuff
--------------------------------------------------*/

.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

.alignleft {
float:left;
}

.alignright {
float:right;
}

.navigation {
text-align:center;
font-size:120%;
}

.wp-caption {
text-align:center;
margin:0px 10px 0px 0px;
}

.wp-caption img {
padding:0 2px 2px 0;
background:#ddd;
margin:0px 10px 0px 0px;
}

.wp-caption-dd {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

#footer a:hover {
text-decoration:none;
color:#333;
background:#EFF8FB;
}

#content li,#content2 li {
border-bottom:0px solid #EFF8FB;
padding:3px;
}

a,#sidebar li a,#footer a {
color:#fff;
text-decoration:none;
}

/* footer
--------------------------------------------------*/
#footer {
color:#333;
margin:0;
padding:20px 0;
}
Neben meinem Seiten-Stylesheet bringt das Plugin auch ein eigenes mit. Darin habe ich aber nichts geändert. Hier ist sicherheitshalber der Code:
Code:
/*
CSS Name: Default Styles
Description: NextGEN Default Gallery Stylesheet
Author: Alex Rabe
Version: 1.50

This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with a default theme Kubrick. Modify it when your theme struggle with it,
it's only a template design

*/

/* ----------- Album Styles Extend -------------*/

.ngg-albumoverview {
	margin-top: 10px;
	width: 100%;
	clear:both; 
	display:block !important;
}

.ngg-album {
    height: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #fff;
}

/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
} 

.ngg-album {
	overflow: hidden;
	padding: 5px;
	margin-bottom: 5px;
	border: 1px solid #cccccc;
}

.ngg-albumtitle {
	text-align: left;
 	font-weight: bold;
	margin:0px;
	padding:0px;
	font-size: 1.4em;
	margin-bottom: 10px;
}

.ngg-thumbnail {
	float: left;
	margin-right: 12px;
}

.ngg-thumbnail img {
	background-color:#FFFFFF;
	border:1px solid #A9A9A9;
	margin:4px 0px 4px 5px;
	padding:4px;
	position:relative;
}

.ngg-thumbnail img:hover {
	background-color: #A9A9A9;
}

.ngg-description {
	text-align: left;
}

/* ----------- Album Styles Compact -------------*/

.ngg-album-compact {
	float:left;
	height:180px;
	padding-right:6px !important;
	margin:0px !important; 
	text-align:left;
	width:120px;	
}

.ngg-album-compactbox {
	background:transparent url(albumset.gif) no-repeat scroll 0%;
	height:86px;
	margin:0pt 0pt 6px !important;
	padding:12px 0pt 0pt 7px !important;
	width:120px;
}


.ngg-album-compactbox .Thumb {
	border:1px solid #000000;
	margin:0px !important;
	padding:0px !important;
	width:91px; 
	height:68px;
}

.ngg-album-compact h4 {
	font-size:15px;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
	width:110px;
}

.ngg-album-compact p {
	font-size:11px;
	margin-top:2px;
}

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
	overflow: hidden;
	margin-top: 10px;
	width: 100%;
	clear:both; 
	display:block !important;
}

.ngg-galleryoverview .desc {
/* required for description */
   margin:0px 10px 10px 0px;
   padding:5px;
}

.ngg-gallery-thumbnail-box {
	float: left;
}

.ngg-gallery-thumbnail {
	float: left;
	margin-right: 5px;
	text-align: center;
}

.ngg-gallery-thumbnail img {
	background-color:#FFFFFF;
	border:1px solid #A9A9A9;
	display:block;  
	margin:4px 0px 4px 5px;
	padding:4px;
	position:relative;
}

.ngg-gallery-thumbnail img:hover {
	background-color: #A9A9A9;
} 

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:90%;
	padding-left:5px;
	display:block;
}

.ngg-clear {
	clear: both;
}

/* ----------- Gallery navigation -------------*/

.ngg-navigation {
	font-size:0.9em !important;
	clear:both !important;
	display:block !important;
	padding-top:15px;
	text-align:center;
	
}

.ngg-navigation span {
	font-weight:bold;
	margin:0pt 6px;
}

.ngg-navigation a.page-numbers,
.ngg-navigation a.next,
.ngg-navigation a.prev, 
.ngg-navigation span.page-numbers,
.ngg-navigation span.next,
.ngg-navigation span.prev {
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-navigation a.page-numbers:hover,
.ngg-navigation a.next:hover,
.ngg-navigation a.prev:hover, 
.ngg-navigation span.page-numbers:hover,
.ngg-navigation span.next:hover,
.ngg-navigation span.prev:hover {
	background-color: #0066CC;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

/* ----------- Image browser style -------------*/

.ngg-imagebrowser {
	
}

.ngg-imagebrowser h3 {
	text-align:center;
}

.ngg-imagebrowser img {
	border:1px solid #A9A9A9;
	margin-top: 10px; 
	margin-bottom: 10px; 
	width: 100%;
	display:block !important;
	padding:5px;
}

.ngg-imagebrowser-nav {
	padding:5px;
	margin-left:10px;	
}

.ngg-imagebrowser-nav .back {
	float:left;
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-imagebrowser-nav .next {
	float:right;
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-imagebrowser-nav .counter {
	text-align:center;
	font-size:0.9em !important;
}

.exif-data {
  	margin-left: auto !important;
    margin-right: auto !important;	
}

/* ----------- Slideshow -------------*/
.slideshow {
	margin-left: auto; 
	margin-right: auto;
	text-align:center;
	outline: none;	
}

.slideshowlink {
	
}

/* ----------- Single picture -------------*/
.ngg-singlepic {
	background-color:#FFFFFF;
	display:block;  
	padding:4px;
}

.ngg-left {
	float: left;
	margin-right:10px;
}

.ngg-right {
	float: right;
	margin-left:10px;
}

.ngg-center {
  	margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------- Sidebar widget -------------*/
.ngg-widget,
.ngg-widget-slideshow {
	overflow: hidden;
	margin:0pt;
	padding:5px 0px 0px 0pt;
}

.ngg-widget img {
	border:2px solid #A9A9A9;
	margin:0pt 2px 2px 0px; 
	padding:1px; 
}

/* ----------- Related images -------------*/
.ngg-related-gallery {
	background:#F9F9F9;
	border:1px solid #E0E0E0;
	overflow:hidden;
	margin-bottom:1em;
	margin-top:1em;
	padding:5px;
}
.ngg-related-gallery img {
	border: 1px solid #DDDDDD;
	float: left;
	margin: 0pt 3px;
	padding: 2px;
	height: 50px;
	width:  50px;
}

.ngg-related-gallery img:hover {
	border: 1px solid #000000;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.04.2009, 15:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Das Clear von .ngg-galleryoverview wirkt auf das Float der Navigation.
Einfachste Lösung: Floate auch die Inhaltsspalte.

Weitere Info liefert die Suchfunktion mit "Block Formatting Context" und "Globales clear".
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.04.2009, 23:19
Benutzerbild von zeitweise
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.04.2009
Beiträge: 2
zeitweise befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für den Tipp! Das floaten der Inhaltsspalte hat zwar geholfen, das Layout aber bei anderen Seiten durcheinander gebracht.

Die/eine gute Lösung war letztlich, in .ngg-galleryoverview aus dem clear:both; ein clear:left; zu machen.
Code:
.ngg-galleryoverview {
	overflow: hidden;
	margin-top: 10px;
	width: 100%;
	clear: left;
	display:block !important;
}
Danke aber sehr für den Hinweis! Endlich kann ich an anderen Stellen weitermachen
Mit Zitat antworten
Antwort

Stichwörter
abstand, abstand verringern, abstände

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
Attribut "Title" innerhalb des Elementes "Style": Probleme AndreasB (X)HTML 15 28.11.2010 23:49
HTML Seite aufwerten,arbeitsaufwand verringern Newbie CSS 2 06.10.2008 22:57
sättigung verringern Jens.K CSS 4 26.01.2008 20:57
Inhalt eines Elementes zentieren (v & h) gigi` CSS 1 06.05.2005 09:44
eigenschaft eines anderen elementes verändern lomtas CSS 2 05.01.2005 13:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:34 Uhr.