Beiträge von rookiestripes

rookiestripes

lol ja und wie is jetzt der genaue pfad oder weißt du das auch nicht :-)

rookiestripes

ach so ok, und wie muß dann der richtige pfad ausschauen

rookiestripes

aber wenn doch header.php und style.css im selber verzeichnis liegen und nur die bilder sich im images/ ordner befinden, dann müßte doch der verweis richtig sein.

In der header.php geh ich ja nur in ein übergeordnetes verzeichnis rein (also images/irgendwas.jpg)

rookiestripes

Hi Leute,

nachdem ich es dann gestern endlich mal geschafft hatte, die Sidebar rechts floaten zu lassen, habe ich heute versucht, den Banner, welcher ja schon ziemlich groß ist, in mehrere kleine Stücke zu slicen, um diese dann mittels CSS auf der Page einzubauen. Und wie so vieles auch im Webdesign, klappte das natürlich nicht.

In der header.php habe ich zuerst folgende Änderungen durchgeführt:

HTML

<div id="page">




<div id="header">


<div id="flogo"></div>


<div id="fnavi">
<img src='images/froopz_navi_left.jpg' width='211' height='68' alt='Navi Left'>
<img src="images/froopz_navi_home.jpg" width="67" height="68" alt="Home">
<img src="images/froopz_navi_design.jpg" width="68" height="68" alt="Design">
<img src="images/froopz_navi_net.jpg" width="70" height="68" alt="Net">
<img src="images/froopz_navi_froopz.jpg" width="72" height="68" alt="Froopz">
<img src="images/froopz_navi_right.jpg" width="210" height="68" alt="Navi Right">
</div>


<div id="fnavbtm"></div>




</div>
</div>

Alles anzeigen

Der Logo Teil sollte nen Hintergrund bekommen, da es sich ja nicht wie bei den Linkgrafiken um ein aktives Element handelt.

Die Navigation schloß ich in einem Div ein

Und der untere Teil der Navigation "fnavbtm" sollte auch ein Hintergrundbild bekommen.

Die dazugehörige CSS Style Definition schaut folgendermaßen aus:

Code

* {
padding: 0;
margin: 0;
}


body {
background: #fff url(images/froopz_bground.jpg) repeat-x;
color: #000;
font: normal 75%/1.4em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
a, a:link
{
font-family: georgia, times, "times new roman", serif;
color: #9cf;
text-decoration: none;
}


a:visited
{
color: #600;
}


a:hover, a:active
{
color: #fff;
background-color: #B52C07;
}


input {
	margin: 10px 0;
	border: 1px solid #000;
	background-color: #fff;
}


hr{
display: none;
}


/*IDS*/
#wrapper {
width: 760px;
margin: 0px auto;
overflow: hidden;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
}


#header
{
margin: 0 auto;
height: 279px;
}


#flogo{
	position: relative;
	width: 698;
	margin: 0;
	background: url(images/froopz_header.jpg) no-repeat 0 0;
}


#fnavi {
	position: relative;
	width: 698px;
	margin-top: 120px;
	background-color: red;
}


#fnavbtm {
	width: 698px;
	margin: 0;
	background: transparent url(images/froopz_navi_btm.jpg) no-repeat 0 0;
}


#content {
margin: 20px 10px;
float: left;
width: 500px;
background-color: transparent;
}


#sidebar {
background-color: #ff9;
height: 100%;
border-left: 1px solid #c5c877;
margin: 20px 10px 10px 550px;
}
#sidebar ul {
margin-left: 20px;
list-style-type: none;
line-height: 150%;
}


#sidebar li h2 {
	color: #f93;
	margin: 10px 0;
}


#footer {
width: 764px;
height: 27px;
margin: 0 auto;
clear: both;
text-align: center;
}


/*Classes*/
.copyright {
font: normal 0.8em/1.6em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}


p.postmetadata {
text-align: right;
font-size: 75%;
}

Alles anzeigen

Wenn ich nun die Seite aufrufe erhalte ich gerade mal den hübschen Alt Text der Bilder, die Bilder an sich seh ich aber leider nicht

rookiestripes

und jemand ne idee?

rookiestripes

Also den Link gibts hier:

http://www.pixelgeist.de

und so schaut die CSS Datei nach dem Verändern jetzt aus:

Code

* {
padding: 0;
margin: 0;
}


body {
background: #fff url(images/froopz_bground.gif) repeat-x;
color: #000;
font: normal 75%/1.4em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
a, a:link
{
font-family: georgia, times, "times new roman", serif;
color: #B52C07;
text-decoration: none;
}


a:visited
{
color: #600;
}


a:hover, a:active
{
color: #fff;
background-color: #B52C07;
}


hr{
display: none;
}


/*IDS*/
#wrapper {
width: 760px;
margin: 0px auto;
overflow: hidden;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
}


#header
{
position: relative;
margin: 0px auto 0 auto;
width: 750px;
height: 204px;
background: transparent url(images/froopz_header.jpg) no-repeat 0 0;
}


#content {
float: left;
width: 450px;
background-color: transparent;
}


#sidebar {
margin-left: 200px;
background-color: Silver;
}
#sidebar ul {
list-style-type: none;
line-height: 150%;
}


#footer {
width: 764px;
height: 27px;
margin: 0 auto;
clear: both;
text-align: center;
}


/*Classes*/
.copyright {
font: normal 0.8em/1.6em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}


p.postmetadata {
text-align: right;
font-size: 75%;
}

Alles anzeigen

rookiestripes

das bringts auch net wirklich, also normalerweise muß das doch gehen, versteh ich net

rookiestripes

ok auch mit korrigierter width angabe bleibt das doofe teil da unten in der rechten ecke kleben

rookiestripes

Hi Leute,

hab mir jetzt schon zig Tutorials zu Gemüte geführt aber irgendwie peil ich die ganze Lage dann doch noch net so ganz. Hier mal meine css Datei.

Code

* {
    padding: 0;
    margin: 0;
}


body {
    background: #fff url(images/froopz_bground.gif) repeat-x;
    color: #000;
    font: normal 75%/1.4em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
a, a:link 
    { 
    font-family: georgia, times, "times new roman", serif;
    color: #B52C07; 
    text-decoration: none;
    }
    
    a:visited 
    { 
    color: #600; 
    }
    
    a:hover, a:active
    {
        color: #fff;
        background-color: #B52C07;
    }
    
hr{
    display: none;
}


/*IDS*/
#wrapper {
    width: 760px;
    margin: 0px auto;
    overflow: hidden;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    color: #000;
}


#header
{
  position: relative;
  margin: 0px auto 0 auto;
  width: 750px;
  height: 204px;
  background: transparent url(images/froopz_header.jpg) no-repeat 0 0;
}


#content {
    margin-right: 200px;
    background-color: transparent;
}


#sidebar {
    float: right;
    width: 170;
    background-color: Silver;
}
#sidebar ul {
    list-style-type: none;
    line-height: 150%;
}


#footer {
    width: 764px;
    height: 27px;
    margin: 0 auto;
    clear: both;
    text-align: center;
}


/*Classes*/
.copyright {
    font: normal 0.8em/1.6em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}


p.postmetadata {
    text-align: right;
    font-size: 75%;
}

Alles anzeigen

Also eigentlich sollte sich doch der Sidebar (wegen float right) rechts neben den Content Bereich stellen oder? Macht er aber nicht, und ich hab keine Ahnung wieso. Würd mich über Hilfe freuen

rookie

rookiestripes

Hi, ich schau doch mal hier: http://www.coffee2code.com/archives/2004/…-post-listings/

rookiestripes

Hi nochmal,

hab es jetzt mit der Update Version des Plugins versucht und auch das <div id="showimage"></div> vor den </body> in der footer.php reingeknallt; dennoch funzt das Teil nicht so, wie es eigentlich sollte. Jemand ne Idee, woran das liegen könnte?

rookiestripes

vielleicht fehlt mir im footer teil vom template ja irgendwas keine ahnung

hat mich auch gewundert, hab mir nämlich den quelltext angeschaut und da sind wie gesagt, die oben genannten teile vorhanden

rookiestripes

Bitte schön

Hatte bereits den Cache geleert und auch den PC neugestartet und alle Internetspuren vernichtet ;-)

http://www.rookiestripes.com/webstripes/blog/

rookiestripes

Hi,

find das Plugin auch spitze.

Wenn ich (mittels Firefox) auf die Seite vom Zappelfilip surfe und mir das Plugin so anschaue, dann funzt es einwandfrei, sobald ich es aber bei mir implementiere und das Fenster versuche mittels

klicke hier

aufzurufen, dann macht es mir das Bild in einem ganz normalen neuen großen Fenster auf. Jemand ne Idee, woran das liegen könnte?

rookiestripes

Danke, hat geklappt. Hab mir den ganzen #menu Teil noch mal genau angeschaut und überschüssige Definitionen einfach gelöscht, damit es übersichtlicher wird.

rookiestripes

Ok, das einzige Problem das noch bleibt, ist die Geschichte mit den CSS Definitionen für den Sidebar Bereich.

Der DIV Container, welcher den Sidebar enthält, trägt die ID #menu (also jetzt hier in meinem Fall).

Wenn ich mir nun den Quellcode anschaue, dann schaut es wie folgt aus:

Code

<div id="menu">
[img]bilder/nav_top.jpg[/img]




<ul>
<li id="search">
<span id="sbheader">


Suchen:


</span>
<form action="/webstripes/blog/index.php" method="get" id="searchform">
<div>
<input type="text" size="15" id="s" name="s">




<input type="submit" value="Suchen" name="submit">
</div>
</form>


[/list]
[img]bilder/dullthings_right.jpg[/img]
<ul>
<li id="linkcat-1">
<h2>


URL Pool


</h2>
<ul>
[*]
<a title="Tutorial Seite" href="http://www.pixel2life.com">


Pixel2Life


</a>


[*]
<a title="Tutorial Seite" href="http://www.good-tutorials.com">


Good Tutorials


</a>

Alles anzeigen

Jetzt müßte ja eigentlich das Wort "Suchen", welches oben die Class "sbheader" zugewiesen bekommt, den Style übernehmen,w elcher in der style.css definiert wurde. Also wenn ich jetzt schreibe

.sbheader {
color: blue;
font-weight: bold;
text-decoration: underline;
}

müßte ja eigentlich, wenn man von der Kaskade ausgeht, dieser Style als erstes gerendert werden, weil er ja näher am Element dran ist. Oder muß ich schreiben:

#menu .sbheader ??????

Ich weiß in diesem Fall nicht genau, wie ich ein Element gezielt ansprechen kann, welches sich in einem div Container befindet, der die ID #menu trägt. Es muß ja irgendwie möglich sein, zu bestimmen, daß beispielsweise alle <ul> und [*] Tags, die sich innerhalb von #menu befinden, eine Klasse zugewiesen bekommen, oder?

rookiestripes

Cool, mal wieder danke für die prompte Hilfe Monika. Hab mich zu aller erst über die Sache mit dem Flash Banner hergemacht und folgende Lösung gefunden:

In der Header.php habe ich zwischen das Header <div>,also das Teil mit der ID header, folgendes Code Schnipsel gepackt:

In der style.css muß man bei den Definitionen für den Header Bereich nix einfügen, da das Flash Teil ja schon in der header.php mit drin steht.
Wenn man jetzt die Seite über den W3.org Validator laufen läßt, dann erscheinen auch keine Fehler mehr in Verbindung mit Flash.

rookiestripes

Hallo an alle,

allmählich steige ich immer mehr mit Wordpress durch und langsam aber sicher komm ich hinter das Potential von CSS. Jedoch find ich die CSS Definitionen für den Sidebar Bereich so umständlich und etwas kompliziert, daß ich nicht mehr weiter komme.

Hier mal der Link zu meinem Blog:

http://www.rookiestripes.com/webstripes/blog/

Und hier mal der Teil aus meiner CSS Datei:

Code

/***  ---------------------------------Definition Sidebar Container ------***/
#menu {
	background:#CCCCCC;
	width:150px;
        height: 100%;
        float:right;
}
/***  ---------------------------------Ende Sidebar Container --------------------------------***/






/***  ---------------------------Definition Sidebar Menü------------------------------------***/
#menu ul li {
	color: 			#3399FF;
	font-weight:		bold;
	list-style-type:	none;
        text-align:             left;
	margin: 		2px;
	padding-left:		3px;
        letter-spacing:         0;
        border:                 solid red 1px;
	text-transform:		uppercase;
}


#menu ul li ul {
        text-align:             left;
        letter-spacing:         0;
}


/* Style Definition für Überschrift (h2) URL Pool*/
#menu ul h2 {
        font-size: 12px;
        color: green;
        background-color: #FFF;
        border-bottom: dashed black 1px;


        font-weight: bold;
}
        


/***  sidebar links  ***/
#menu ul li a {
        font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration:none;
        margin-top:0;
	padding-left:12px;
        letter-spacing:0;
}


#menu ul li a:hover {
	border-bottom:1px solid #000;
}




#menu form {
	margin:0 0 0 13px;
}


/***  the search field  ***/
#menu input#s {
	width:80%;
	background:#FFFFFF;
	border:1px solid #000000;
	color:#000;
}




/***  ---------------------------Ende Sidebar Menü------------------------------------***/

Alles anzeigen

Wäre nett,w enn mir mal jemand genau die CSS Style erklärt, die den Sidebar Bereich bestimmen.

rookiestripes

Ok, wieder mal ein kleiner Erfolg :D

Für alle, die im Header statt dem langweiligen Text oder statt einem Bild einen Flash Banner haben wollen, hier die Schritte.

In der style.css oder meinestyle.css oder was auch immer ;-):

Code

#header {
	background: url("http://www.meineadresse.com/banner.swf") no-repeat bottom center; 
	border-bottom: none;
	margin:0;
	width: 600px;
}

Ich glaub es ist noch wichtig, daß die padding Angabe rausgeworfen wird, da sonst der Banner ein wenig komisch positioniert wird ;-) Die "Font" oder "Letter-Spacing" Definition kann man rauswerfen, da diese ja nur für Text ausschlaggebend wären.

In der header.php dann noch folgendes:

Code

<body>
<div id="rap">
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="129">
  <param name="movie" value="http://www.meineadresse.com/banner.swf" />
  <param name="quality" value="high" />
  <embed src="http://www.meineadresse.com/banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="129"></embed>
</object></div>
<div id="content">

rookiestripes

Ja ja, diese Spekulationen immer :D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge von rookiestripes

Sliced Layout mit CSS

Sliced Layout mit CSS

Sliced Layout mit CSS

Sliced Layout mit CSS

CSS am Rande des Wahnsinns

CSS am Rande des Wahnsinns

CSS am Rande des Wahnsinns

CSS am Rande des Wahnsinns

CSS am Rande des Wahnsinns

Suche PlugIn für letzte Beiträge und Kommentare

Zap_ImgPop

Zap_ImgPop

Zap_ImgPop

Zap_ImgPop

Sidebar CSS

Sidebar CSS

Sidebar CSS

Sidebar CSS

Die Wege zum eigenen Theme sind unergründbar ;-)

Die Wege zum eigenen Theme sind unergründbar ;-)