CSS Hilfe

User961 · 24. April 2012

Hallo,
ich habe mal eine Frage. Arbeite gerade an einer Homepage.
Dort habe ich ein vertikales Menu, dieses bleibt bei egal welche Monitor größe an der einen und der selben Stelle.

Die Verlinkungen wie Forum Home etc. bewegen sich aber immer wie angeschossene Hühner.

Wie kann ich das machen, dass der Text fest über der Öeiste sitzt?

Code

ul#menu
{
	margin:0px;
	list-style-type:none;
	position:relative;
	display:block;
	height:66px;
	font-size:23px;
	font-weight:bold;
	padding-left:50px;
	padding-top:22px;
	background:transparent url(images/nav_bg.png) no-repeat center;
	font-family:Arial, Helvetica, sans-serif;
}

Alles anzeigen

Witch · 24. April 2012

du hast nur den CSS Code vom menü gepostet, poste mal im script das <a wie du das geschrieben hast

User961 · 24. April 2012

PHP

<link rel="stylesheet" href="menu_style.css" type="text/css" media="all" />


<body>	
		<div>
			<ul id='menu'>
			<li class="button"><a class='current' href='http://' >Home</a></li>
			<li class="button"><a href='http://'  >Forum</a></li>
			<li class="button"><a href='http://localhost/test/index.php'  >Registrieren</a></li>
			<li class="button"><a href='http://localhost/test/index_ucp.php'  >UCP</a></li>
			<li class="button"><a href='http://'  >Spenden</a></li>
			</ul>
		</div>

Alles anzeigen

Witch · 24. April 2012

Ich würde dem <a href ne id geben und es ausrichten.. so etwa...

Code

<li class="button"><a id="test" class='current' href='http://' >Home</a></li>

Code

#test{
            	position:relative;
            	margin-left:
            	margin-right:
}

edit//
oder setze alles in eine Tabelle und gib der Tabelle ne id und verschiebe alles so wie du es brauchst

User961 · 24. April 2012

Ich werde des mal mit Grafiken versuchen, melde mich denn^^

Witch · 24. April 2012

ich zB. habe das so lösen können:
ich habe das table Element in ein div gesetzt.

Code

<div id="div1"><table id="table1" border="2" style="float:left; margin-left:25px; margin-bottom:40px;">

Code

#table1{
			empty-cells : hide;
			position : scroll;
			height : 20%;
			font-weight : bold;
			border : 4px double black;
		}

User961 · 24. April 2012

Soo,
habe wieder ein Problem^^

Wenn ich mit FireBug über meine Homepage gehe wird angezeigt, dass dort Grafiken sind. Aber ich kann diese nicht sehen.

PHP

.content {
	background: url("/images/content.png") no-repeat scroll 0 0 transparent;
	margin: 0 auto;
	min-height: 403px;
	padding: 70px 79px 0;
	width: 1054px;
}
.content ul.navigation {
	list-style: none outside none;
	margin: 0;
	padding: 0;
}
.content ul.navigation li {
	float: left;
	margin: 0 29px 0 0;
}
.content ul.navigation li a#nav_home {
	background: url("images/home.png") repeat scroll 0 0 transparent;
	display: block;
	height: 32px;
	width: 95px;
}
.content ul.navigation li a#nav_forum {
	background: url("images/forum.png") repeat scroll 0 0 transparent;
	display: block;
	height: 32px;
	width: 130px;
}
.content ul.navigation li a#nav_register {
	background: url("images/register.png") repeat scroll 0 0 transparent;
	display: block;
	height: 50px;
	width: 200px;
}
.content ul.navigation li a#nav_ucp {
	background: url("images/ucp.png") repeat scroll 0 0 transparent;
	display: block;
	height: 32px;
	width: 130px;
}
.content ul.navigation li a#nav_spenden {
	background: url("images/spenden.png") repeat scroll 0 0 transparent;
	display: block;
	height: 50px;
	width: 200px;
}

Alles anzeigen

PHP

<body>
	<p>
		<center><img src="images/header.png" width="525" height="260" title="Banner" alt="Banner der Homepage" border="0"></center>
		<style type="text/css">
		@import"css/style.css";
		</style>
		<body>	
		<div class="content">
		<ul class="navigation">
			<li>
			<a id="nav_home" onmouseout="$('#nav_home').fadeTo(1000, 1);" onmouseover="$('#nav_home').fadeTo(1000, 0.6);" href="test/test.html"></a>
			</li>
			<li>
			<a id="nav_forum" onmouseout="$('#nav_forum').fadeTo(1000, 1);" onmouseover="$('#nav_forum').fadeTo(1000, 0.6);" href="test/forum.php"></a>
			</li>
			<li>
			<a id="nav_register" onmouseout="$('#nav_register').fadeTo(1000, 1);" onmouseover="$('#nav_register').fadeTo(1000, 0.6);" href="test/index.php"></a>
			</li>
			<li>
			<a id="nav_ucp" onmouseout="$('#nav_ucp').fadeTo(1000, 1);" onmouseover="$('#nav_ucp').fadeTo(1000, 0.6);" href="test/index_ucp.php"></a>
			</li>
			<li>
			<a id="nav_spenden" onmouseout="$('#nav_spenden').fadeTo(1000, 1);" onmouseover="$('#nav_spenden').fadeTo(1000, 0.6);" href="test/spenden.php"></a>
			</li>
		</ul>
		</div>
		</body>


</html>

Alles anzeigen

Wäre echt froh, wenn ihr mir helfen könntet.
Gruß

Witch · 24. April 2012

überprüfe mal on du den richtigen Ordner angegeben hast
images/header.png

ist da das Bild drinnen und existiert der ordner auch?

schaue ansonsten nach ob das Bild ne andere Endung hat als .png

User961 · 24. April 2012

Nene, das ist schon richtig.
Gruß

Witch · 24. April 2012

ansonsten definiere das im CSS mal so:

Code

background-image : url(images/header.png);

User961 · 24. April 2012

Also sos chauts aus, vielleicht versteht mans nun besser.
Gruß

Witch · 24. April 2012

ich sehe du hast es so geschrieben:

Code

background-image : url("grafiken/linie.png");

die Anführsungszeichen sind da meiner Meinung nicht richtig und müssen weg

User961 · 24. April 2012

PHP

background-image:url(images/background.png);

Ne habs so ohne.
Und Background wird ja angezeigt.
Gruß

Brain afk! Änders mal^^

Edit: Geht immer noch nicht

//EDIT2: So.

PHP

background: url(../images/forum.png) repeat scroll 0 0 transparent;

Habs nun so geändert und es geht!
Gruß

EDIT:

Mal wieder ne Frage.
Irgendwie ist die erro box über dem Header.
Wie kann ich dsa machen, dass die unter dem Header ist?
Gruß

PHP

<style type="text/css">
 body
 {
  background-image:url(images/background.png);
  background-repeat:no-repeat;
  background-position:top;
 }
body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
.registration_form {
	margin:0 auto;
	width:500px;
	padding:14px;
}
label {
	width: 10em;
	float: left;
	margin-right: 0.5em;
	display: block
}
.submit {
	float:right;
}
fieldset {
	background:#EBF4FB none repeat scroll 0 0;
	border:2px solid #88ba3d;
	width: 500px;
	margin-top: -400px;
}
legend {
	color: #fff;
	background: #88ba3d;
	border: 1px solid #88ba3d;
	padding: 2px 6px
}
.elements {
	padding:10px;
}
p {
	border-bottom:1px solid #88ba3d;
	color:#666666;
	font-size:11px;
	margin-bottom:20px;
	padding-bottom:10px;
}
a{
	color:#0099FF;
font-weight:bold;
}


/* Box Style */




 .success, .warning, .errormsgbox, .validation {
	border: 1px solid;
	margin: 0 auto;
	padding:10px 5px 10px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
	 font-weight:bold;
 	width:450px;

}


.success {

	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('images/success.png');
}
.warning {


	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('images/warning.png');
}
.errormsgbox {
 
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('images/error.png');
}
.validation {
 
	color: #D63301;
	background-color: #FFCCBA;
	background-image: url('images/error.png');
}






</style>

Alles anzeigen

Witch · 24. April 2012

poste mal bitte ein Bild von der Box die du meist, so kann ich mir das kaum vorstellen

breadfish.de 11. März 2022