• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Checkbox in Div zentrieren

N

nvidia

New member
Also ich hab hier ein Schnipsel gefunden:
line-height:250% für das div.
Das klappt auch in Chrome,FF,ie6 aber bei opera ist das nicht in der mitte, sondern ganz unten.
Gibt es eine besser Möglichkeit?
//Geht das nur indem man einen table in das div quetscht
gruß nvidia
 
Zuletzt bearbeitet:
Nach Glaskugelbefragung (kein Code vorhanden) schlage ich vor, dass du line-height mal weglässt und nur für die IEs diese Anweisung in ein CC schreibst
Code: 
<!--[if lt IE 8]>
<style type="text/css">
.check span{
    line-height:20px;
}
</style>
<![endif]-->

Dabei bekommen die Divs eine class="check" und das span-Element setzt du um den Text , der im Div neben der Checkbox steht.

Code: 
<div class="check"><input type="checkbox" name="xxx" value="xxx" class="checkbox" /><span>Text</span></div>
 
?! neben der checkbox steht kein text, die ist allein im div und ich wollte das zentrieren, ohne alles bleibt das ganz normal stehen, wo es immer steht.
 
Hm, was meinst du mit 'zentrieren'? Vertikal? Und kein Text neben den Checkboxen?

Hab mal ein Beispiel gemacht (mit Text und nem border).
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.check{
	margin:10px 0 0 0;
	border:1px solid black;
}
input.checkbox{
	display:block;
	float:left;
}
.check span{
	line-height:20px;
}
</style>
</head>
<body>
<form action="#">
   <div class="check"><input type="checkbox" name="xxx" value="xxx" class="checkbox" /><span>kein Text</span></div>
   <div class="check"><input type="checkbox" name="xxx" value="xxx" class="checkbox" /><span>kein Text</span></div>
   <div class="check"><input type="checkbox" name="xxx" value="xxx" class="checkbox" /><span>kein Text</span></div>
</form>
</body>
</html>

Gib doch mal ein paar Zeilen Code hier rein. Was hast du denn bisher?
 
Code: 
<!doctype html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
	<script>
	$(document).ready(function() {
		$(".message").hover(function() {
			if(!$(this).find('input:checkbox').is(':checked')){
				$(this).addClass("mail-hover");
				$(this).find('.dropDownButton').find('img').css("visibility","visible");
			}
		},function(){
			$(this).removeClass("mail-hover");
			$(this).find('.dropDownButton').find('img').css("visibility","hidden");
		});	

	});
	</script>
    <style>
	div{margin:0;padding:0;display:block;}
	input {margin:0;padding:0; display:block;}
	* { font-family:Verdana, Geneva, sans-serif; font-size:11px;}
	
	.mail_overview { white-space:nowrap;}
	.header_description, .message{ position:relative;}
	.header_description {font-weight:800; padding-bottom:3px; margin-bottom:5px; border-bottom:1px dashed #e38909; height:20px; line-height:20px;}
		.checkbox_desc,.from_desc,.subject_desc,.date_desc{position:absolute;heigth:100%;line-height:22px; padding:0px 3px 0px 3px;}
		.checkbox_desc{left:0px; width:26px;padding-left:5px;}
		.from_desc {left:26px; width:150px;} 
		.subject_desc {left:206px; right:61px;}
		.date_desc {right:0px; width:61px;padding-right:5px;}
		
		.date_desc, .date { text-align:right;}
	
	.message{height:22px; border:1px solid transparent;width:auto;}
		.checkbox,.from,.dropDownButton,.subject,.date{position:absolute;height:22px; padding:0px 3px 0px 3px;}
		.checkbox{left:0; width:25px; padding-left:5px;}
		.from {left:25px; width:150px; } 
		.dropDownButton {left:175px; width:30px; line-height:250%;} 
		.subject {left:205px; right:60px; width:auto;}
		.date {right:0px; width:60px; padding-right:5px;}
	.mail-hover {  border:1px solid #FFB349; background:#FFEEC1}
	.mail-select { border:1px solid #e38909; background:#FFEAC0}
		
	</style>
    </head>
    <body>
        <div class="mail_overview">
        	<div class="header_description">
            	<div class="checkbox_desc"><input type="checkbox" class="checkbox_header"></div>
                <div class="from_desc">Absender</div>
                <div class="subject_desc">Betreff</div>
                <div class="date_desc">Datum</div>
            </div>
        	<div class="mailheader">
            	<div class="message" id="mail-1">
                    <div class="checkbox"><input type="checkbox"></div>
                    <div class="from">John Doe</div>
                    <div class="dropDownButton"><img src="img/db.png" style="visibility:hidden"/></div>
                    <div class="subject">How are you doing?</div>
                    <div class="date">15:30</div>
            	 </div>
            	<div class="message" id="mail-2">
                    <div class="checkbox"><input type="checkbox"></div>
                    <div class="from">John Doe</div>
                    <div class="dropDownButton"><img src="img/db.png" style="visibility:hidden"/></div>
                    <div class="subject">How are you doing?</div>
                    <div class="date">31.12.10</div>
            	 </div>
            	<div class="message" id="mail-3">
                    <div class="checkbox"><input type="checkbox"></div>
                    <div class="from">John Doe</div>
                    <div class="dropDownButton"><img src="img/db.png" style="visibility:hidden"/></div>
                    <div class="subject">How are you doing?</div>
                    <div class="date">31. Mar.</div>
            	</div>
            </div>
        </div>
    </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben