zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ausrichtung von div's und die Höhe eines Suchfeldes...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.07.2006, 15:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2006
Beiträge: 50
Saesh befindet sich auf einem aufstrebenden Ast
Standard Ausrichtung von div's und die Höhe eines Suchfeldes...

Einen wunderschönen Sonntag wünsche ich euch allen,
momentan nerven mich leider ein paar kleine CSS-Schwierigkeiten, die mich etwas vom Genießen des schönen Wetters abhalten.

Aber evtl. kann mir jemand von euch helfen *hoff*

Problem 1:

Ich arbeite um mir einen Bildrahmen zu machen mit integriertem Caption-Text mit zwei DIVs.

So siehts eingebunden aus:


Dieser Code stellt es mir dar:
Code:
.thumbnail {
	padding: 7px;
	border: 1px solid #ddd;
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
}	
.caption { 
	clear: both;
	font-size: 0.9em; 
	padding-top: 0.2em;	
	color: #003063;
}
Nun habe ich auch seiten, wo ich die Bilder rechts anstatt links ausgerichtet haben muss.
Deshalb habe ich mir eine Klasse thumbnail2 gemacht, die rechts floated.

Das Ganze sieht dann so aus:


Auch wenn ich den Caption-Text mit text-align: right noch nach rechts bringe, bleibt die Box weiterhin komplett über die ganze Content-Breite.

Wie kriege ich die Box nun so schön rechts hin, wie sie auch im ersten Bild mit Links-Ausrichtung zu sehen ist?


Problem 2:
Ich habe ein Suchfeld (folgender Code aus dem CMS Joomla) mit der Klasse "inputbox".
Dieser inputbox habe ich eine Höhe von 17px gegeben, welche auch im FF sauber angezeigt wird.
Der IE ignoriert die Höhenangabe leider absolut.

Hier ein Bild:


Hier der komplette Code der Suche und des umgebenden DIVs.
Code:
/* -----------------------------------
---> DIE SUCHE
------------------------------------*/
#search {
	float: right;
	padding: 8px 15px;
	margin: 0;
	height: 20px;
	width: 170px;
	background-color: #28a5de;
}
#search label {
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
}
#search #search_box {
	border: none;
}
#search dt, #search dd {
	display: inline;
	float: left;
	margin: 0 5px 0 0;
}
.inputbox {
	background-color: #a9dfec;
	height: 17px;
	width: 165px;
}
#mod_search_searchword {
	font-size: 12px;
}
Wie kriege ich das Problem in den Griff?


Danke für eure Hilfe im voraus

Gruß
Sascha
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.07.2006, 15:35
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Erstmal zum 1. Problem: Du floatest ohne width, das sollte man nie tun. Viel mehr kann man nicht sagen, ohne das genaue Markup zu kennen. Ich kann's mir zwar vorstellen, aber bevor wir evtl. doch aneinander vorbeireden, poste bitte mal das Markup (es reicht der Ausschnitt mit den beiden divs samt Bild & Text).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.07.2006, 16:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2006
Beiträge: 50
Saesh befindet sich auf einem aufstrebenden Ast
Standard

Punkt 1 erledigt.
Der Fehler lag am align="right" im Image Tag.
Nun klappts ohne Probleme.

Bleibt nur noch Problem 2 übrig.

Geändert von Saesh (16.07.2006 um 16:30 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.07.2006, 16:39
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Saesh
align="right" im Image Tag.
Daß man so etwas nicht mehr benutzen sollte, ist Dir bewußt?

Zum zweiten Problem poste mal das Markup zur CSS (letztere allein reicht nicht).
Mit Zitat antworten
  #5 (permalink)  
Alt 16.07.2006, 16:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2006
Beiträge: 50
Saesh befindet sich auf einem aufstrebenden Ast
Standard

Ist mir nicht bewusst gewesen...
Gibt es dafür einen bestimmten Grund?

Hier der Code für die Suche... kann dir hier nur den geparsten Code aus Joomla geben, daher siehts auch mit den Klassen etwas wild aus. Not my fault

Code:
			<div id="search">
						<div class="moduletable">
			
<form action="index.php?option=com_search" method="get">
	<div class="search">

		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="20" value="suchen..."  onblur="if(this.value=='') this.value='suchen...';" onfocus="if(this.value=='suchen...') this.value='';" />	</div>

	<input type="hidden" name="option" value="com_search" />
	<input type="hidden" name="Itemid" value="" />	
</form>		</div>
					</div>
		</div>
Mit Zitat antworten
  #6 (permalink)  
Alt 16.07.2006, 16:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Saesh
Ist mir nicht bewusst gewesen... Gibt es dafür einen bestimmten Grund?
Ja, dieser lautet schlicht und einfach "CSS" Genauer gesagt: Inhalt und Design (d.h. Darstellung) sollen komplett getrennt werden, in Markup und CSS. Wenn Du Dein Markup zu Bild & Unterschrift postest, läßt es sich ganz schnell optimieren.

Geändert von heiko_rs (16.07.2006 um 16:50 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 16.07.2006, 16:46
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Ist mir nicht bewusst gewesen...
Gibt es dafür einen bestimmten Grund?
Das Design gehört ins CSS.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
  #8 (permalink)  
Alt 16.07.2006, 16:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2006
Beiträge: 50
Saesh befindet sich auf einem aufstrebenden Ast
Standard

Dann bin ich nun schlauer, was die Bildformatiererei angeht.
Nun helft mir bitte noch bei der Darstellung des Suchfeldes.
Mit Zitat antworten
  #9 (permalink)  
Alt 16.07.2006, 17:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Saesh
Dann bin ich nun schlauer, was die Bildformatiererei angeht.
Eine Optimierung des Markups scheint Dich allerdings dennoch nicht wirklich zu interessieren, aber das mußt Du selber wissen

Zitat:
Zitat von Saesh
Nun helft mir bitte noch bei der Darstellung des Suchfeldes.
Mit dem von Dir geposteten Markup & CSS nimmt mein IE 6 sämtliche für .inputbox getestete Höhen (17px, 5px, 170px) genauso einwandfrei an wie der Firefox.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.07.2006, 17:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2006
Beiträge: 50
Saesh befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs
Eine Optimierung des Markups scheint Dich allerdings dennoch nicht wirklich zu interessieren, aber das mußt Du selber wissen
Ich wüsste nicht, was du an diesem Code noch optimieren willst:
Code:
<div class="thumbnail">
<a rel="lightbox" href="/nwo/images/stories/bilder/Tankfeld4.jpg"><img height="151" src="/nwo/images/stories/bilder/bild_allgemeines2.jpg" alt="Alt-Text" /></a>
<div class="caption">
Das Mineral&ouml;ltanklager der NWO
</div>
</div>
<p>Die Nord-West Oelleitung GmbH (NWO) wurde im November 1956 gegr&uuml;ndet, um die erste Mineral&ouml;lfernleitung in Europa zu bauen und zu betreiben und damit die Rohstoffversorgung mehrerer [...]</p>

Zur Suche:
Das Problem ist, dass der IE die blaue Box auch nach unten hin erweitert.
Ändere ich da die Größe, dann steht die Inputbox im Firefox aus dem Kasten hervor und im IE passts dann vlt mal.

Geändert von Saesh (16.07.2006 um 17:10 Uhr)
Mit Zitat antworten
Sponsored Links
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
100% Höhe von Divs klappt einfach nicht. icecold CSS 10 24.09.2010 10:25
3 DIVs - dynamische Höhe fire90de CSS 2 02.06.2009 13:39
div hat keine Höhe, wenn innere divs gefloatet werden? Anotherone CSS 3 23.07.2006 01:25
divs aneinander in der höhe ausrichten - wie ? MS Master CSS 1 24.02.2005 16:49


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