ilch Forum » Allgemein » HTML, PHP, SQL,... » Div fragen

Geschlossen
  1. Fr. 17.12.2010 12:16 Uhr #1
    User Pic
    xCrystalx Mitglied
    Registriert seit
    31.12.2008
    Beiträge
    505
    Beitragswertungen
    4 Beitragspunkte
    Hi

    ich versuche gerade meine erste Seite mit div zu machen. Das klappt auch alles super, wollte aber noch mal fragen ob ich das so richtig mache. 

    <body bgcolor="#333333">
<div style="width:892px;">
	<div class="login" style="float:left;"></div>
    <div class="header" style="float:left;"></div>
    <div class="menubg" style="float:left;">
    	<div class="menu" style="float:left; vertical-align:middle; width:100px; height:39px"><a class="menu" href="#">Startseite</a></div>
        <div class="menu" style="float:left; vertical-align:middle; width:100px; height:39px"><a class="menu" href="#">Team</a></div>
        <div class="menu" style="float:left; vertical-align:middle; width:100px; height:39px"><a class="menu" href="#">Forum</a></div>
    </div>
</div>
</body>


    und dann wollte ich fragen wie ich den menütext mittig bekomme. bei tabelle ist es "valign="middle"" aber wie ist es bei div?

    Danke

    Gruß Tibor
    Brain.exe Die Rundumlösung
    0 Mitglieder finden den Beitrag gut.
  2. Fr. 17.12.2010 12:22 Uhr #2
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    margin: 0 auto
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  3. Fr. 17.12.2010 12:50 Uhr #3
    User Pic
    xCrystalx Mitglied
    Registriert seit
    31.12.2008
    Beiträge
    505
    Beitragswertungen
    4 Beitragspunkte
    danke... hatte es in der style.css stehen unter body aber das ging dann wohl nicht^^

    ist sonst der quellcode gut?

    *edit
    ich merke das ich das was du mir geschrieben hast auch gesucht habe, aber nicht das ist was ich wollte^^ es soll von der höher her in der mitte sein


    Zuletzt modifiziert von xCrystalx am 17.12.2010 - 12:53:03
    Brain.exe Die Rundumlösung
    0 Mitglieder finden den Beitrag gut.
  4. Fr. 17.12.2010 13:02 Uhr #4
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    externer Link

    Aus <body bgcolor="#333333"> kannst du in der CSS-Datei auch folgendes machen:

    body {
    background:#333
    }

    Und das macht wenig Sinn:
    class="menu" style="float:left; vertical-align:middle; width:100px; height:39px"

    Du hast du bereits eine Klasse definiert, warum schreibst du dann noch zusätzlich style="" ?

    Das ganze float:left kannst du auch so zusammenfassen:

    .login, .header, .menubg, .menu { float:left }
    0 Mitglieder finden den Beitrag gut.
  5. Fr. 17.12.2010 13:30 Uhr #5
    User Pic
    xCrystalx Mitglied
    Registriert seit
    31.12.2008
    Beiträge
    505
    Beitragswertungen
    4 Beitragspunkte
    dein link versteh ich jetzt nicht^^

    hier mal die seite
    mrl.square7.ch/test/

    ich möchte den Menütext in der mitte haben aber mit der seite komm ich da nicht hin...
    Brain.exe Die Rundumlösung
    0 Mitglieder finden den Beitrag gut.
  6. Fr. 17.12.2010 15:01 Uhr #6
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    259
    Beitragswertungen
    33 Beitragspunkte
    Den menütext vertical zentrieren kannst du mit line-height,
    wenn zb die hintergrundgrafik die du verwendest 35px höhe hat machst du line-height: { 35px; } damit solltest du das dann mittig haben.

    Greetz Wizz
    0 Mitglieder finden den Beitrag gut.
  7. Fr. 17.12.2010 17:15 Uhr #7
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    ZitatZitat geschrieben von xCrystalx
    dein link versteh ich jetzt nicht^^
    Der macht auch keinen Sinn zunge, einfach ignorieren.

    Wizzard26 hat eine passende Antwort parat. lächeln
    0 Mitglieder finden den Beitrag gut.
  8. So. 02.01.2011 22:07 Uhr #8
    User Pic
    Tiborius Mitglied
    Registriert seit
    31.12.2008
    Beiträge
    505
    Beitragswertungen
    4 Beitragspunkte
    hi

    ich bin es noch mal (andere Name^^)

    ich bin gerade an einer Anpassung nur irgend wie habe ich einen Fehler drin und ich finde ihn nicht.

    hier mal hochgeladen
    mrl.square7.ch/test/

    hier mal meine index 
    <!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=iso-8859-1">

<link rel="stylesheet" type="text/css" href="style.css">

<title>{TITLE}</title>

<!--Menüscript Anfang-->
<script type="text/javascript" language="javascript">
var hauptmenuepunkt=new Array();
var submenue=new Array();

hauptmenuepunkt[0]="INFORMATION";
submenue[0]="sub1";

hauptmenuepunkt[1]="TEAM";
submenue[1]="sub2";

hauptmenuepunkt[2]="COMMUNITY";
submenue[2]="sub3";

hauptmenuepunkt[3]="MEDIA";
submenue[3]="sub4";

var vorher="sub1";
function show_submenue(menuepunkt,lnk)
{
	for(i=0;i<hauptmenuepunkt.length;i++)
	{
		if(hauptmenuepunkt[i]==menuepunkt.childNodes[0].childNodes[0].nodeValue)
		{
			menue=submenue[i];
		}
	}

	if(menue!="none")
	{
		if(vorher=="")
		{
			fade(0,menue,vorher);
			vorher=menue;
		}
		else
		{
			if(vorher!=menue)
			{
				fade(0,menue,vorher);
				vorher=menue;
			}
		}
	}
	else
	{
		if(vorher!="")
		{
			fade(0,'',vorher);
			vorher="";
		}
	}
}

function fade(step, menue, vorher)
{
	step = step || 0;
	
	if(menue!="")
	{
		document.getElementById(menue).style.display="block";
		document.getElementById(menue).style.opacity = step/100;
		document.getElementById(menue).style.filter = "alpha(opacity=" + step + ")"; // IE
	}
	
	step = step + 2;
	if(vorher!="")
	{
		document.getElementById(vorher).style.opacity=1-(step/100);
		document.getElementById(vorher).style.filter = "alpha(opacity=" + (100-step) + ")"; // IE
		//document.getElementById(menue).style.filter = "alpha(opacity=" + step + ")";
	}

	if (step <= 100)
	{
			if(vorher!="" && step==100)
			{
				document.getElementById(vorher).style.display="none";
			}
			
			window.setTimeout(function () { fade(step, menue, vorher); }, 1);
	}
}
</script>
<!--Menüscript Ende-->



</head>

<body>

<div style="width:1000px; margin:0 auto;">

<div class="header"></div>

<div style="height:31px;">
	<div class="leer_01"></div>
    <div class="menu_01"><a href="#" title="INFORMATION" onmouseover="show_submenue(this);"><img src="gfx/gfx_03.gif" border="0" alt="INFORMATION"></a></div>
    <div class="leer_01"></div>
    <div class="menu_01"><a href="#" title="TEAM" onmouseover="show_submenue(this);"><img src="gfx/gfx_04.gif" border="0" alt="TEAM"></a></div>
    <div class="leer_01"></div>
    <div class="menu_01"><a href="#" title="COMMUNITY" onmouseover="show_submenue(this);"><img src="gfx/gfx_05.gif" border="0" alt="COMMUNITY"></a></div>
    <div class="leer_01"></div>
    <div class="menu_01"><a href="#" title="MEDIA" onmouseover="show_submenue(this);"><img src="gfx/gfx_06.gif" border="0" alt="MEDIA"></a></div>
    <div class="leer_02"></div>
</div>

<div class="content_01">

	<div class="left">
    
    	<div class="subnavi">
        	<div id="sub1" style="float:left; position:absolute">
			<a class="sub" href="index.php?news" title="news" onmouseover="show_submenue(this);">» News</a>&nbsp;&nbsp;&nbsp;
            <a class="sub" href="index.php?news" title="news" onmouseover="show_submenue(this);">» News</a>&nbsp;&nbsp;&nbsp;
            <a class="sub" href="index.php?news" title="news" onmouseover="show_submenue(this);">» News</a>&nbsp;&nbsp;&nbsp;
            <a class="sub" href="index.php?news" title="news" onmouseover="show_submenue(this);">» News</a>
            </div>
			<div id="sub2" style="float:left; display:none; position:absolute">
			<a class="sub" href="index.php?teams" title="tems" onmouseover="show_submenue(this);">» Teams</a>
			</div>
			<div id="sub3" style="float:left; display:none; position:absolute">
			<a class="sub" href="index.php?forum" title="forum" onmouseover="show_submenue(this);">» Forum</a>
			</div>
			<div id="sub4" style="float:left; display:none; position:absolute">
            <a class="sub" href="index.php?forum" title="forum" onmouseover="show_submenue(this);">» Forum</a>
            </div>
		</div>
        
        <div class="content_02"></div>
        
    </div>
    
    <div class="right">
    	<div class="leer_03"></div>
        
        <div>
        	<div class="leer_04"></div>
                       
            <div class="box">
            	<div class="login_head"></div>
                <div class="login_box">{_boxes_login}</div>
            </div>
                      
            <div class="leer_05"></div>
        </div>
        
        <div class="leer_06"></div>
        
        <div>
        	<div class="leer_04"></div>
                       
            <div class="box">
            	<div class="partner_head"></div>
                <div class="partner_box">{_boxes_allianz}</div>
            </div>
                      
            <div class="leer_05"></div>
        </div>
        
        <div class="leer_06"></div>
        
        <div>
        	<div class="leer_04"></div>
                       
            <div class="box">
            	<div class="ergebniss_head"></div>
                <div class="ergebniss_box">{_boxes_allianz}</div>
            </div>
                      
            <div class="leer_05"></div>
            
        </div>
        
        <div class="leer_06"></div>
        
        <div>
        	<div class="leer_04"></div>
                       
            <div class="box">
            	<div class="forum_head"></div>
                <div class="forum_box">{_boxes_allianz}</div>
            </div>
                      
            <div class="leer_05"></div>
            
        </div>
        
    </div>
    
</div>

<div class="down"></div>

</div>

</body>
</html>


    und hier die style.css 
    body {
	background-color:#f0f0f0;	
	background-image:url(gfx/gfx_01.gif);
	background-repeat:repeat-x;
	color:#065b7a;
	font-family:Tahoma;
	font-size:12px;
  	margin:0 Auto;

}

.header {
	background-image:url(gfx/gfx_02.gif);
	height:215px;

}

.leer_01 {
	float:left;
	height:31px;
	width:12px;
}

.leer_02 {
	float:left;
	height:31px;
	width:440px;
}

.leer_03 {
	float:left;
	height:10px;
	width:268px;
}

.leer_04 {
	float:left;
	width:3px;
	height:auto;
}

.leer_05 {
	float:left;
	width:11px;
	height:auto;
}

.leer_06 {
	float:left;
	height:20px;
}

.leer_07 {
	float:left;
	height:20px;
}

.menu_01 {
	float:left;
	height:31px;
	width:128px;
}

.menu_02 {
	float:left;
	height:31px;
	width:128px;
}

.menu_03 {
	float:left;
	height:31px;
	width:128px;
}

.menu_04 {
	float:left;
	height:31px;
	width:128px;
}

.subnavi {
	float:left;
	background-image:url(gfx/gfx_09.gif);
	height:45px;
	width:731px;
	line-height:45px;
}

a.sub { 
    text-decoration:none;
	color:#065b7a;
	font-size:11px;
	padding-left:15px;
	width:731px;
}

a.sub:hover { 
    text-decoration:none;
	color:#065b7a;
	font-size:11px;
	padding-left:15px;
	font-weight:bold;
	width:731px;
}

.content_01 {
	width:1000px;
	background-color:#fff;
	float:left;
}

.content_02 {
	width:731px;
	background-color:#fff;
	float:left;
}

.left {
	width:731px;
	background-color:#fff;
	float:left;
}

.right {
	width:268px;
	background-color:#fff;
	float:left;
	height:auto;
}

.down {
	width:1000px;
	height:332px;
	background-color:#fff;
	float:left;
}

.box {
	float:left;
	width:254px;
	height:142px;
}

.login_head {
	float:left;
	background-image:url(gfx/gfx_07.gif);
	width:254px;
	height:53px;
}

.login_box {
	float:left;
	background-image:url(gfx/gfx_08.gif);
	width:254px;
	height:89px;
}

.partner_head {
	float:left;
	background-image:url(gfx/gfx_10.gif);
	width:254px;
	height:53px;
}

.partner_box {
	float:left;
	background-image:url(gfx/gfx_11.gif);
	width:254px;
	height:233px;
}

.ergebniss_head {
	float:left;
	background-image:url(gfx/gfx_12.gif);
	width:254px;
	height:53px;
}

.ergebniss_box {
	float:left;
	background-image:url(gfx/gfx_13.gif);
	width:254px;
	height:200px;
}

.forum_head {
	float:left;
	background-image:url(gfx/gfx_14.gif);
	width:254px;
	height:53px;
}

.forum_box {
	float:left;
	background-image:url(gfx/gfx_13.gif);
	width:254px;
	height:200px;
}
    Brain.exe Die Rundumlösung
    0 Mitglieder finden den Beitrag gut.
  9. Di. 04.01.2011 21:51 Uhr #9
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    Was ist denn nicht da, wo es hingehört?
    In Firefox sieht alles "gewollt" aus. lächeln
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten