Suche im Forum:
Suchen


Autor Nachricht
Beitrag19.04.2010 um 13:53 (UTC)    
Titel: Balken

Hay,
ich wollte gerne einen Senkrechten und einen Wagerechten Balken durch mein Design machen, ich hab auch shcon die Codes, bloß es klappt irgendwie nicht, könnte mir einer sagen wo ich das Einfügen muss? Das Design sit noch lange nicht fertig bloß ich würde das jetzt gerne mal machen.

Über dem Design:
Code:

<div id="Body">
<div id="Navi">
<a class="Navi" href="#">Link</a>
<a class="Navi" href="#">Link</a>
<a class="Navi" href="#">Link</a>
<a class="Navi" href="#">Link</a>
<a class="Navi" href="#">Link</a>
<a class="Navi" href="#">Link</a>
<a class="Navi" href="#">Link</a>
<a class="Navi" href="#">Link</a>
</div>
<div id="Content">



Unter dem Design:
Code:

</div>
<div id="Footer">
<center>
<table width="200" cellspacing="1" cellpadding="1" border="0">
    <tbody>
        <tr>
            <td><div id="FooterBox">
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
</div></td>
            <td><div id="FooterBox">
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
</div></td>
            <td><div id="FooterBox">
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
<a class="Footer" href="#">Link</a><br />
</div></td>
        </tr>
    </tbody>
</table>
<br />
</center>
<div id="FooterSchrift" >Copyright © 2010 by <a class="FooterSchrift" href="http://zax66.de.tl">ZaX66</a></div>
</div>
</div>


Ohne Style Tags:
Code:

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element checked_menu{display:none;}
li.nav_element subpage{display:none;}
li.nav_element{display:none;}
#nav_container{display:none;}
#sidebar_container{display:none;}
#counter{display:none;}


table[height="102"] {
margin:0px auto;
}



#Body{
color: 000000;
background-color: b70000;
margin:0px auto;
}



#Content{
width: 658px;
background: transparent;
padding: 15px;
color: #000;
border: solid 1px;
text-align: left;
margin:0px auto;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}


#Navi{
color: 000000;
width: 688px;
heigth: 110px;
border: 1px solid;
margin-bottom: 50px;
margin-top: 50px;
text-decoration: none;
margin: 35px auto;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}

a.Navi{
color: #b30000;
border-left: solid 3px;
padding-left: 5px;
margin-left: 20px;
text-decoration: none;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}


a.Navi:hover{
color: #000000;
border-left: solid 3px;
padding-left: 5px;
margin-left: 20px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}


#Footer{
color: #FFFFFF;
width: 90%;
heigth: 30%;
background-color: #383838;
border: 1px solid #000000;
padding: 10px;
margin:35px auto;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}


#FooterBox{
width: 125px;
border: 1px solid #FFFFFF;
color: #FFFFFF;
padding: 10px;
margin opx auto;
text-align: center;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}


a.Footer{
color: #FFFFFF;
text-decoration: underline;
padding: 0px 20px 0px 20px;
}


a.Footer:hover{
color: #b70000;
text-decoration: none;
text-font: weight;
border: 1px solid #b70000;
padding: 0px 20px 0px 20px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}


#FooterSchrift{
color: #b70000;
float: right;
margin-top: -20px;
}

a.FooterSchrift{
color: #FFFFFF;
text-decoration: underline;
}


a.FooterSchrift:hover{
color: #b70000;
text-decoration: underline;
text-font: weight;
}



#Senkrecht
{
margin-right: 120 px;
border: 2px solid #000000;
width: 100px;
height: auto;
background-color: # b70000;
padding-left: 15px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}



#Wagerecht
{
border: 2px solid #000000;
width: auto;
height: 150px;
background-color: # b70000;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}




Auf meiner Test Seite seht ihr das Ergebniss:
http://zax66-test.de.tl/Home.htm


Zuletzt bearbeitet von zax66 am 19.04.2010, 15:53, insgesamt einmal bearbeitet
Beitrag19.04.2010 um 19:49 (UTC)    
Titel: Balken im Design

Hallo

Auf deine Anfrage per PN hin:


Es kommt immer darauf an, was du mit diesen Balken machen möchtest. Erst dann kann man sagen, wie der Code dafür aussehen kann.

Zwei ganz einfache Balken ohne Inhalt, die über das komplette Design reichen, können mit folgendem Grundcode erstellt werden:

Code ohne Style-Tags:

Zitat:


#Balken_waagerecht
{
position: absolute;
top: 300px;
left: 50%;
margin-left: -50%;
height: 50px;
width: 100%;
background-color: #FF0000;
background-image: none;
}

#Balken_senkrecht
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -25px;
height: 100%;
width: 50px;
background-color: #AA0000;
background-image: none;
}



Text über dem Design:

Zitat:


<div id="Balken_waagerecht"></div>
<div id="Balken_senkrecht"></div>




Abstand des waagerechten Balkens von oben
Höhe des waagerechten Balkens
Abstand des senkrechten Balkens von der Bildschirmmitte
Breite des senkrechten Balkens




EDIT

Ich habe gerade gesehen, dass du die Balken ja schon definiert hast. Dann musst du sie nur noch aufrufen mit folgendem Code in "Text über dem Design":

Zitat:


<div id="Wagerecht"></div>
<div id="Senkrecht"></div>





Gruß

FK
______________


Zuletzt bearbeitet von fkdesign am 19.04.2010, 20:54, insgesamt einmal bearbeitet
Beitrag19.04.2010 um 21:05 (UTC)    
Titel:

Ah ok ich probier's morgen aus...
Beitrag20.04.2010 um 13:02 (UTC)    
Titel:

So es klappt es eineiger Maßen, aber der Content und Navi etc. verschieben sich net, deswegen überlappt der Balken die. Woran liegt das? Ich hab die Codes jetzt so modifiziert:

Code:

#Balken_waagerecht
{
position: absolute;
left: 50%;
top: 100px;
margin-left: -830px;;
height: 150px;
width: 99%;
background-color: #FF0000;
background-image: none;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border: 1px solid #000000;
margin-bottom: 40px;
}

#Balken_senkrecht
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -545px;
height: 100%;
width: 150px;
background-color: #AA0000;
background-image: none;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border: 1px solid #000000;
}

Beitrag20.04.2010 um 18:58 (UTC)    
Titel:

Hallo

Die Balken verschieben das Design nicht automatisch, da sie absolut positioniert sind (so wie viele deiner übrigen Klassen auch).
Entweder musst du alles in einen oder mehrere Container packen oder du verschiebst die sich überlappenden Elemente einfach bis sie an der richtigen Stelle sitzen (Navigation also so weit nach unten/rechts, bis sie nicht mehr verdeckt wird).

Die prozentualen Größenangaben der Balken sind übrigens nur dann sinnvoll, wenn auch der Rest des Designs variabel ist (oder wenn die Balken - so wie im Beispielcode - über den ganzen Bildschirm reichen sollen). Wenn sie stattdessen - so wie bei dir - eine feste Größe haben sollen, solltest du besser Angaben in px verwenden, da sie sonst bei jedem Benutzer anders aussehen.


Gruß

FK
______________
Beitrag20.04.2010 um 19:05 (UTC)    
Titel:

Ja, diese Problem hab ich behoben, aber jetzt ist oben so ein hässlciiher weißer rand...
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de