Beiträge von Mucki

Mucki

Vielen Dank !!!

Jetzt funktionierts. bin noch recht neu in der Thematik. Aber jetzt hab ich gleich mal wieder was dazu gelernt. Also vielen Dank nochmal !!

hab auch die float befehle raus genommen

Mucki

Also hier die kompletten Codes:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title>Homepage</title>

<link rel="stylesheet" type="text/css" href="templates/current/stylesheet_site.css" />

</head>

<body>

<div id="site" class="containing-float">

<div id="main">

<div id="logo">

<div id="navi_top">
<ul>
<li><a class="aktiv" href="#1">Home</a></li>
<li><a class="navi_top" href="#">Ueber mich</a></li>
</ul>
</div>
</div>

<div id="sidebar_left">
<div id="userblock1" class="borders_right"></div>
<div id="userblock2" class="borders_right"></div>
<div id="menu" class="borders_right"></div>
</div>
<div id="content"></div>
<div id="module" ><p>module</p></div>
</div>

<div id="right" ></div>

</div>

</body>
</html>

Und hier der CSS-Code:

body
{
margin: 0px 0px 0px 0px;
padding: 0px auto ;
background: ;
font: 10px Arial;
color: black;
border: 1px dotted black;
}

p
{
margin: 5px auto auto 5px;
}

li, ul
{
font: 10px Arial;
}
h1, h2
{

font-family: Arial;
font-size: 12px;
font-style: normal;

}

img.banner_c
{
display: block;
margin: auto;
}

img.banner_r
{
display: block;
margin: 0px 0px 0px auto;
}

.containing-float:after
{
/* Inhalt pseudo-Element :after;
* somit [clear] moeglich
*/
content: "";

/* [content] verbergen;
*/

height: auto;

/* Block-Level fuer [clear];
*/
display: block;

/* [float] clearing;
* einbeziehen der Float-Container;
*/
clear: both;

padding-bottom: -10px;

}

#site
{
width: 1050px;
height: auto;
border: 0px dashed red;
background:;
display: block;
position: relative;
margin: auto auto auto auto;
}

#main
{
width: 890px;
height: auto;
border: 0px solid blue;
background: ;
float: left;

}

#banner_head
{

}

#banner_side
{
float: left;
width: 150px;
height: auto;
margin-top: 0px;
margin-left: 0px;
border: 0px solid black;
}

#logo
{

height: 126px;
width: 890px;
background: url(graphics/logo/background_image_orange_890_70.png);
border: 0px solid black;
margin: 5px 0px 0px auto;
float: left;

}

#logo h1
{
margin: 0px auto auto 0px;
float: left;
display: inline;
visibility: hidden;
}

#logo h2
{
margin: 0px auto auto 0px;
float: left;
display: inline;
visibility: hidden;
}

/*navigation top starts here */

#navi_top
{
display: block;
float: right;
border: 0px solid red;
width: auto;
margin: 106px 40px auto auto;
height: auto;
padding-left: 0px;

}

#navi_top ul
{

float: left;
border: 0px solid green;
list-style: none;
margin: 0px auto auto 0px;
padding-left: 0px;
height: auto;
}

#navi_top li
{

float: left;
font-weight:bold;
font-size: 10px;
border: 0px solid black;
}

#navi_top li a
{
color: #999898;
text-decoration: none;
font-weight: 900;
float: left;
width: 100px;
height: auto;
background-color: white;
text-align: center;
border-right: 1px solid #F29560;
padding: 5px 0px 3px 0px;
opacity: ;
}

#navi_top li a.last
{
color: #999898;
text-decoration: none;
float: left;
width: 100px;
height: auto;
background-color: white;
text-align: center;
border-right: 0px solid #FD4B01;
padding: 5px 0px 3px 0px;
}

#navi_top li a:hover
{
color: #FD4B01;
}

#navi_top li a.aktiv
{
float: left;
width: 100px;
height: auto;
background-color: #FD4B01;
color: white;
text-align: ;
border-right: 0px solid orange;
padding: 5px 0px 3px 0px;
}

/*navigation top ends here */

.borders_right
{
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;

}

/*sidebar left starts here */

#sidebar_left
{
width: 150px;
height: auto;
border: 0px solid black;
background:;
float: left;
margin-top: 15px;

}

#userblock1
{
width: 150px;
height: 50px;
border: 0px solid black;
background: url(graphics/userblock/image_top.png) no-repeat left top;
float: left;
margin-top: 0px;

}

#userblock2
{
width: 150px;
height: auto;
border: 0px solid black;
background: url(graphics/userblock/image_top.png) no-repeat left top;
float: left;
margin-top: 10px;
padding-top: 20px;

}

#menu
{
width: 150px;
height: auto;
border: 0px solid black;
background: url(graphics/userblock/image_top.png) no-repeat left top;
float: left;
margin-top: 10px;

}

/*sidebar left ends here */

/*content starts here */

#content
{
width: 500px;
height: 500px;
float: left;
border-top: 2px solid #FD4B01;
background: #F2F4F7;
margin: 15px auto auto 25px;

}

/*content starts here */

/*sidebar right starts here */

#module
{
width: 180px;
height: 300px;
background: url(graphics/userblock/image_top_salmon.png) no-repeat left top;
float: right;
margin: 15px 5px auto auto;
border: 0px solid black;
border-top: 1px solid #3B5998;
border-left: 1px solid #D8DFEA;
}

/*content ends here */

#footer
{
width: 500px;
height: 50px;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 175px;
border: 0px solid black;
background: white;
float: left;
border-top: 1px solid #3B5998;
}

So jetzt hab ich dir den ganzen Code drinnen. Ich hoffe es geht so für euch. wusst jetzt nich wie ich es anders machen soll.

Danke!!

Mucki

Mucki

Das hab ich schon probiert. das funktioniert nicht. ich möchte die eine klasse für alle 3 Divs nutzen um die Rahmen zu hinterlegen.

ich hab quasi im HTML folgendes geschrieben:

da passiert aber nichts wenn ich im CSS die klasse folgendermaßen definiert habe.

.borders_right
{
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;

}

es verändert bspw. nur die div-box "userblock1" wenn ich den klassenname ändere auf

#userblock1.borders_right
{
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;
}

das möchte ich aber nicht. ich möchte mit einer klasse alle div-boxen formatieren. ist dies eigentlich möglich?

Mucki

Hallo zusammen,

Ich hätte mal eine Frage. Ihr könnt mir da sicher schnell weiterhelfen.

Ich hab folgendes Problem. Und zwar möchte ich eine Klasse mehreren Div-Boxen zuordnen. Aber irgendwie funktioniert das nicht so, wie ich mir das vorstelle.

ich habe folgende Codes:

CSS-Code:

#userblock1
{
width: 150px;
height: 50px;
border: 0px solid black;
background: url(graphics/userblock/image_top.png) no-repeat left top;
float: left;
margin-top: 0px;
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;

}

#userblock2
{
width: 150px;
height: auto;
border: 0px solid black;
background: url(graphics/userblock/image_top.png) no-repeat left top;
float: left;
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;
}

#menu
{
width: 150px;
height: auto;
border: 0px solid black;
background: url(graphics/userblock/image_top.png) no-repeat left top;
float: left;
margin-top: 10px;
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;
}

HTML-Code

ich möchte die im CSS-Code rot markierten Rahmen als Klasse definieren, da sie bei jedem dieser div-boxen gleich sind.

Ich dachte da an folgende Klasse:

.borders
{
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;
}

aber das funktioniert so nicht. es funktioniert lediglich wenn ich die div-box mit der klasse kombiniere.

#userblock1.borders
{
border-top: 1px solid #3B5998;
border-right: 1px solid #D8DFEA;
border-bottom: 1px dotted #D8DFEA;
}

ist irgendwie in meinen augen nicht so wirklich sinnvoll wenn ich für jede div-box eine eigene klasse erzeugen muss. da kann ich es ja gleich im CSS-Code in die jeweiligen Div-Box Eigenschaften schreiben.

Vielleicht habt ihr ja eine Ahnung warum das nicht so funktioniert wie ich mir das vorstelle.

Vielen Dank schon mal

Gruss

Mucki

Mucki

Ah Ok. ach jetzt hab ichs geschnallt. Ich brauch die Navi in jeder seite... Hört sich so im nachhinein logisch an, aber muss man erst mal draufkommen. Aber auf jedenfall vielen Dank.

Ich hoffe ich habe deine Nerven nicht zu überstrapaziert!

viele Grüße

Mucki

Mucki

Also ich hab jetzt mal das ganze als Zip Datei mit angehängt.

Ich hoffe so ist es leichter.

Vielen Dank

Mucki

Ja genau, eine Kachelgrafik. Achso, in das a-Element. ich habe momentan noch keine Internetadresse, somit kann ich die Homepage noch nicht raufladen. Ich könnte dir das ganze als zip Datei per email schicken, wenn dir das nichts ausmacht.

Vielen Dank !!!

Mucki

Mucki

hallo sejuma,

Vielen Dank das du dir Zeit für mich nimmst.

Ich habe dies ausprobiert mit den height und width-Werten zuordnen bzw. hab ich die Höhen und Breitenangaben dem li-Element zugeordnet. Aber was ist eine BG-Graphik? Ich habe quasi eine Navigationsleiste mit so einem Slidedoor-Effekt. Wenn ich nun bspw. dem li-Element eine feste Höhe und Breite zuordne haut es mir die Navigationsleiste zusammen, denn die hinterlegten Graphiken sind größer als das angezeigte Format. Laut dem Tutorial soll das so sein, da ich auch mal längere Wörter eingeben will und sonst ein Spalt zwischen der linken und der rechten Seite des Buttons entsteht.
Aber was ich immer noch nicht so ganz verstehe, wie wird den bei drücken eines Buttons die andere Graphik angezeigt. Hab ich im HTML-Code was falsch gemacht?

Mucki

Hallo zusammen,

Ich habe vor einer Woche angefangen meine HP mit css zu erstellen. Bis jetzt hat das auch ganz gut funktioniert. Aber jetzt hab ich aus einem Tuturial eine Navigationsleiste erstellt.

Mein Problem ist, dass ich die Button der Navigationsleiste je nach Status (aktuell oder nicht angeklickter Button) mit verschiedenen Grafiken hinterlegen möchte.

Auch sollen sich die Seiten die durch die Navigationsleiste angesteuert werden in einem anderen bzw. übergeordneten Div öffnen.

ich habe aus dem Tutorial folgenden Code für die HTML-Datei und CSS-Datei erstellt.

Vielleicht könnt Ihr mir ja hierbei weiterhelfen.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TestSeite</title>
<link href="style_copy.css" rel="stylesheet" media="screen" type="text/css">
</head>

<body>

<div id="main">
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">ueber mich</a></li>
<li><a href="#">Ausbildung</a></li>
</ul>
</div>
</div>

</body>
</html>

und der CSS-Code:

body
{
margin: 20px 0px;
padding: 0px;
background: white;
font: 10px Arial;
color: black;
border: 1px dotted black;
}

#site
{
width: 950px;
height: 800px;
margin: 0px auto;
border: 1px dashed red;
background: transparent;
}

#main
{
margin-top: 2px;
width: 745px;
height: 650px;
float: ;
border: 1px dotted orange;
background: ;
}

#header
{
float:left;
width:100%;
font-size:100%;
line-height:normal;
background: url(graphics/navbar_graphics/background_header_transparent.png) repeat-x
bottom;
border: 1px solid blue;
}

#header ul
{
margin:0;
padding:5px 10px 0;
list-style:none;
}

#header li {
float:left;
background:url(graphics/navbar_graphics/button_left.png) no-repeat left top;
line-height: 100%;
margin:0;
padding:0 0 0 20px;
}

#header a {
float: left;
display:block;
background:url(graphics/navbar_graphics/button_right.png) no-repeat right top;
text-decoration:none;
font-weight:bold;
color:white;
}

/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

#header a, #header strong, #header span {

display:block;
background:url(graphics/navbar_graphics/button_right.png) no-repeat right top;
padding:5px 20px 4px 0px;
}

#header #current {
background-image:url(graphics/navbar_graphics/button_left_on.png);
}

#header #current a {
background-image:url(graphics/navbar_graphics/button_right_on.png);
padding-bottom:6px;

}

Es wird weder eine andere Graphik angezeigt, wenn ich einen Button der Navigationsleiste drücke, noch kann ich die Links in einem Div öffnen lassen.

Ich habe hierzu schon verschiedene Einträge in Foren gelesen, aber ich verstehe das noch nicht so ganz. Vielleicht könnt Ihr mir ja helfen. Bin schon fast am verzweifeln.

Danke schon mal für Eure Mühe

Grüsse

Mucki

Beiträge von Mucki

Probleme mit der Zuordnung einer Klasse zum mehreren Divs

Probleme mit der Zuordnung einer Klasse zum mehreren Divs

Probleme mit der Zuordnung einer Klasse zum mehreren Divs

Probleme mit der Zuordnung einer Klasse zum mehreren Divs

nicht verändernde Graphik in der CSS-Navigationsleiste

nicht verändernde Graphik in der CSS-Navigationsleiste

nicht verändernde Graphik in der CSS-Navigationsleiste

nicht verändernde Graphik in der CSS-Navigationsleiste

nicht verändernde Graphik in der CSS-Navigationsleiste