HTML/CSS Neue, andere Frage, im letzten Post - Fullsizebanner im Header positionieren ?

Mrblista · 27 Mai 2010

Untenstehende Frage wurde super beantwortet, meine neue Frage steht im letzten Post.

Ich habe einen Beitrag in einem meiner Wordpress Instalationen, bei dem die eingefügten Bilder sich zu einem seltsamen "S" zusammenstellen. Ich hätte gerne 3 in der Reihe oder notfalls 2. Da viele Einträge mit ebenfalls vielen Bildern folgen werden, benötige ich eine dauerhafte Lösung.

Siehe hier, die Acht Bilder unten:
https://www.casa-particular-kuba.de/casa-particular-in/havanna/vedado/casa-particular-mit-meerblick/

mit align="X" bekomme ich es nicht hin, und mit <br>,<br /> oder <p> auch nicht. Darum denke ich das es eine globale Einstellung in den CSS Dateien gibt. damit kenne ich mich leider (noch) nicht so gut aus. Vielleicht weis jemand Rat. Danke im voraus für Vorschläge.

paddya · 27 Mai 2010

Wenn die Thumbnails immer ähnlich groß sind:

PHP:

.wp-caption {min-height: 190px;}

Mrblista · 27 Mai 2010

Und was machen damit, bzw. wo ist das - gehört das hin.

Ja die Bilder sollen immer gleich groß sein. 150 x 150

folgendes steht im stylsheet

PHP:

}

.wp-caption {
  text-align:center;
  padding:7px 2px 2px;
}
.wp-caption p.wp-caption-text {
  font-size:12px;
  line-height:17px;
  padding:2px 4px 5px;
  margin:0;
  color:#555;
    font-style:italic;

liro9000 · 27 Mai 2010

paddya schrieb:
Wenn die Thumbnails immer ähnlich groß sind:

PHP:

.wp-caption {min-height: 190px;}

Eben mit Firebug getestet, bringt rein gar nichts.
Außerdem wird min-height vom IE nicht unterstützt, zumindest nicht vom 6.

Mrblista schrieb:
Ja die Bilder sollen immer gleich groß sein. 150 x 150

Es kommt nicht nur auf die Bildgröße an, sondern auch auf den Text darunter.

Was bei mir (mit FireBug) funktioniert hat war:

Code:

.wp-caption {
  text-align:center;
  padding:7px 2px 2px;
  height: 190px;
}

(wird bei zu viel Text einfach abgeschnitten, ggf. height höher stellen)

so wie:

Code:

.wp-caption {
  text-align:center;
  padding:7px 2px 2px;
  min-height:200px;
}

(man sollte min-height, aber (vorsorglich) höher stellen, sollte es ein Mal mehr Text geben)

paddya · 27 Mai 2010

liro9000 schrieb:
Eben mit Firebug getestet, bringt rein gar nichts.
Außerdem wird min-height vom IE nicht unterstützt, zumindest nicht vom 6.

Jo. 191px sinds...

Und zum Thema IE6 sag ich nur: Would you drink 9-year-old milk?

liro9000 · 27 Mai 2010

paddya schrieb:
Jo. 191px sinds...

Und zum Thema IE6 sag ich nur: Would you drink 9-year-old milk?

wieso schon gesagt, sollte der Text ein Mal länger ausfallen, dann funktionierst wieder nicht, der Threadstarter muss eben selbst entscheiden ob bei Längerem Text (vlllt.) ein Wenig abgeschnitten wird(height) oder die Bilder wieder falsch positioniert(min-height) werden.

Selbst der IE 8 ist n Jahr alt und so ne "alte" Milch würde ich bestimmt auch nicht trinken xD

Mrblista · 27 Mai 2010

liro9000 schrieb:
Was bei mir (mit FireBug) funktioniert hat war:

Code:

.wp-caption { text-align:center; padding:7px 2px 2px; height: 190px; }

(wird bei zu viel Text einfach abgeschnitten, ggf. height höher stellen)

so wie:

Code:

.wp-caption { text-align:center; padding:7px 2px 2px; min-height:200px; }

(man sollte min-height, aber (vorsorglich) höher stellen, sollte es ein Mal mehr Text geben)

Das obere von beidem hab ich in eine der stylesheet Datein eingefügt. Und es Funktioniert. Danke vielmals.
Doch was hat es mit dem zweiten auf sich, soll ich das auch noch mit reinpacken, obwohl es so funzt ?

liro9000 · 28 Mai 2010

Siehe oben(du kannst dich zwischen den beiden Lösungen entscheiden), das ist im Grunde das Selbe, bloß wird bei dem einen der Text abgeschnitten und bei dem anderen automatisch erweitert, dafür entsteht aber wider das Problem mit der Positionierung.

tleilax · 28 Mai 2010

Mittels "display: inline-block;" sollte sich das Ganze eigentlich nahezu perfekt umsetzen lassen:

HTML:

<style type="text/css">
div {
	background: #efe;
	border: 1px solid #080;
	width: 500px;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	background: #fee;
	border: 1px solid #800;
	display: -moz-inline-stack;
	display: inline-block;
	min-height: 100px;
	margin: 5px;
	text-align: center;
	width: 150px;
	zoom: 1;

	*display: inline;
	_height: 100px;
}
</style>

<div>
	<ul>
		<li>1</li>
		<li style="height: 120px;">2</li>
		<li>3</li>
		<li style="height: 130px;">4</li>
		<li style="height: 110px;">5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>

Die Crossbrowser-Hacks für inline-block habe ich von hier und weiss in Ermangelung eines IE grad nicht, ob sie wirklich das tun, was sie sollen, aber ansonsten wird Google da auch noch weiterhelfen.

Mrblista · 21 Juli 2010

Bei der Seite https://www.low-carb-lifestyle.de/ (ein Wordpress Blog) habe ich irgendetwas geändert, aufgrund dessen man jetzt nach rechts scrollen kann. Der Header ist irgendwie zu weit nach rechts "offen".
Davor wurde das Fenster, also die Seite immer auf die Auflösungsgröße vom Browser bzw. des Bildschirms angepasst.
In den Theme Dateien habe ich aber nichts geändert, darum finde ich auch den Fehler nicht. Hat jemand eine Idee, was es sein könnte ?

tobomator · 21 Juli 2010

ich sehe nirgends ein Search element
wird hiermit erzeugt

Code:

<script type="text/javascript">
/* <![CDATA[ */
	var $j = jQuery.noConflict();
	$j(document).ready(function() {
		$j(".menu a").wrapInner(document.createElement("span")); 
		$j('.post').before('<div class="post_top"></div>').after('<div class="post_end"></div>');
		$j('.widget').before('<li class="widget_top"></li>').after('<li class="widget_end"></li>');
		$j('#search').prepend('<h2 style="text-align: left;">Search</h2>');
	});
/* ]]> */
</script>

Mrblista · 21 Juli 2010

Hab das Problem gefunden, es war ein Plugin.

Danke trotzdem für die Mühe

tobomator · 21 Juli 2010

Hast Du das Plugin einfach so hinzufügen wollen ?
Man sollte wissen was man wo und wie machen muß, damit es auch das gewünschte Ergebnis nach sich zieht!

Mrblista · 31 August 2010

Ich habe bei www.lose-kaufen.info im Header einen Fullsize Banner eingebunden. Jedoch erscheint dieser bei manchen Auflösungen/Browsern nicht da wo er sein sollte.

Aktuell:

HTML:

<!--
#Layer1 {
    position:absolute;
    left:575px;
    top:45px;
    width:472px;
    height:147px;
    z-index:1;
}
-->

HTML:

<div id="Layer1">
<?php if (function_exists('dfrads')) { echo dfrads('9255368'); } ?>
</div>

Der Banner sollte halt bei den gängisten Browsern, rechts neben dem Titel erscheinen, aber nicht herausragen oder was verdecken. Was benutze ich da besser das es sich flexibel an die jeweiligen Auflösungen anpasst.

x3ntar · 31 August 2010

Absolut ist meistens der falsche Weg.
Du kannst das Ding durch

PHP:

position:relative;
float:right;

Bspw. neben den Titel bringen, rechts an den Rand.

Mrblista · 31 August 2010

Und was muss ich dann rausnehmen ?

tleilax · 31 August 2010

Momentan positionierst Du den Banner ja absolut auf der Seite. Einfacher wäre es, wenn Du ihn absolut innerhalb des relativ positionierten Headers anzeigst. Die Absolut-Angaben beziehen sich dann nämlich auf den Header und nicht auf die gesamte Seite.

In CSS:

Code:

#header {
  position: relative;
/* ... */
}
#layer1 {
  position: absolute;
  right: 20px; /* 20px Abstand zum rechten Rand */
  top: 20px; /* 20px Abstand nach oben */
  /* ... */
}

Dabei muss natürlich im HTML der Div #layer1 in den #header verschoben werden.

Mrblista · 31 August 2010

In der Header Datei sieht das so aus:

HTML:

<?php wp_head(); ?>
<style type="text/css">
<!--
#Layer1 {
        
        position:absolute;
        left:575px;
    top:45px;
    width:472px;
    height:147px;
    z-index:1;
}
-->
</style>
</head>
<body>


<div id="Layer1">
<?php if (function_exists('dfrads')) { echo dfrads('9255368'); } ?>
</div>
</div>
<div id="container">
<div id="header">

        <h2><a href="<?php echo get_settings('Startseite'); ?>/"><?php bloginfo('name'); ?></a></h2>
<h3><?php bloginfo('description'); ?></h3>

</div>

Werd also nun mal nur noch

HTML:

<div id="Layer1">
<?php if (function_exists('dfrads')) { echo dfrads('9255368'); } ?>
</div>

Das hier drinn lassen und den Rest in die Css datei versuchen einzufügen.

Mrblista · 31 August 2010

Hm, leider hab ich bis auf Copy und Paste nicht viel mehr drauf. Und habs nich hinbekommen. Werd mal den ein oder anderen von euch per PN nerven. Danke aber.

tleilax · 31 August 2010

Probier's mal so (an right und top halt solange rumtüfteln, bis es passt):

HTML:

<?php wp_head(); ?>
<style type="text/css">
<!--
#header {
    position: relative;
}
#Layer1 {
    position:absolute;
    right:25px;
    top:25px;
    z-index:1;
}
-->
</style>
</head>
<body>


<div id="container">
<div id="header">
        <div id="Layer1">
        <?php if (function_exists('dfrads')) { echo dfrads('9255368'); } ?>
        </div>

        <h2><a href="<?php echo get_settings('Startseite'); ?>/"><?php bloginfo('name'); ?></a></h2>
<h3><?php bloginfo('description'); ?></h3>

</div>

HTML/CSS Neue, andere Frage, im letzten Post - Fullsizebanner im Header positionieren ?

Lose-kaufen.info

Well-known member

Lose-kaufen.info

Well-known member

Well-known member

Well-known member

Lose-kaufen.info

Well-known member

be forever curious

Lose-kaufen.info

Well-known member

Lose-kaufen.info

Well-known member

Lose-kaufen.info

Yet another User

Lose-kaufen.info

be forever curious

Lose-kaufen.info

Lose-kaufen.info

be forever curious

Ähnliche Themen