DIVs ineinanderverschachteln mit fixem Aussenabstand und variabler Größe

ich dachte schon das wäre ein bilder Rätsel ;)


ich hab ihm
.button_text_frame
width:100%;
gemacht

und width:200px;
hab ich ins .button_frame_1 gepackt

nur scheint das nicht so recht zu funktionieren, anscheinden bezieht er sich da auf das body element.
manchmal kann ich die aktionen von css nicht ganz nachvollziehen.
 
bigBigmek hat gesagt.:
ich hab ihm
.button_text_frame
width:100%;
gemacht

und width:200px;
hab ich ins .button_frame_1 gepackt

nur scheint das nicht so recht zu funktionieren, anscheinden bezieht er sich da auf das body element.
manchmal kann ich die aktionen von css nicht ganz nachvollziehen.
Zum Vergrößern anklicken....
Müsste es nicht anders herum lauten, wenn deinem eingangs gezeigten CSS zufolge der Button (mit Text) 200px breit sein soll?

So steht's zumindest auch in den vergangenen Stylesheets, und ergibt einen Sinn.

mfg Maik
 
Maik hat gesagt.:
Müsste es nicht anders herum lauten, wenn deinem eingangs gezeigten CSS zufolge der Button (mit Text) 200px breit sein soll?

So steht's zumindest auch in den vergangenen Stylesheets, und ergibt einen Sinn.
Zum Vergrößern anklicken....
Laßt Bilder sprechen :-)

button.jpg

Wenn dieser milchgrau hinterlegte Button einen Link (<a href=""></a>) repräsentieren soll, sind wir hier noch ein <div> los :-)

Ich tendiere da zu einer horizontal ausgerichteten Liste, wenn da noch weitere Buttons folgen :)

mfg Maik
 
Konnte nicht mehr ganz folgen, aber vielleicht hilft dir das hier

HTML: 
<style type="text/css">
.button
{
	position: absolute;
	background:rgb(100,100,100);
	width:200px;
	height:50px;
	text-align: center;
}

.button_frame_0
{
	background:rgb(0,0,255);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;  
	margin-left	: -100px;   
	padding:2px;
}
.button_frame_1 {
  line-height: 46px;
  width: 196px;
	background:rgb(255,0,0);
	cursor: pointer;
}
.button_frame_1:hover {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
</style>
<div class="button">
	<div class="button_frame_0">
		<div class="button_frame_1">
		BUTTON
		</div>
	</div>
</div>
 
Mordef hat gesagt.:
Konnte nicht mehr ganz folgen, aber vielleicht hilft dir das hier
Zum Vergrößern anklicken....
Mit deiner Code-Variante und ihrer Browserinterpretation (Ansicht) springen wir in dem Thema dann wieder zu Post #3 zurück.

Da du deinen eigenen Worten nach dem Ganzen hier nicht folgen konntest / wolltest, ist dir somit auch entgangen, dass zwischenzeitlich einzelne der ehemals deklarierten Hintergrundfarben für den Button nicht mehr benötigt werden, womit das Markup mit drei ineinander verschachtelten DIV-Blöcken hinfällig ist.

mfg Maik
 
Maik: ja da sollen noch mehr buttons folgen,
genau genommen möchte ich den code für die buttons später mit php generieren lassen.
Und es soll möglich sein einzelene wie auch mehrere buttons zu erzuegen.
Zu der Horizintalen liste, kannst mir da einen kleinen stupser geben.

Ich möchte auch die transparenten buttons, mit den mehrfarbigen buttons in einem panel mischen können.
stelle mir das in etwa so vor

buttonPanel->AddButton(type,text,action)
...

und am schluss

buttonPanel->Create,Paint,Draw oder Write (wie auch immer)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück