Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag05.06.2012 um 19:53 (UTC)    
Titel: Design erstellen?

Kann mir jemand Coden helfen? Ich möchte gerne das links, sowie rechts, eine Box ist mit noch einer Navigation und ich möchte gerne ein Dropdown Menü oben



Code:


Design "CSS" - Beispiel 2 (zum anpassen)


Einfügen im Feld "css ohne style tags"

Zitat:


/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }

/* Werbung mittig */
table[height="102"] { margin: auto; }

/* Hintergrund hinter Design */
body {
background-color: #eeeeee;
background-image: url();
font-family: arial;
font-size: 14px;
color: #000000; }

/* Design-Container */
#container {
width: 962px;
margin: 10px auto;
overflow: hidden; }

/* Headerfeld 960 x 120 */
#header_container {
width: 960px;
height: 120px;
margin-bottom: 10px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9; }

/* Titel im Headerfeld entfernt */
h1#header {display: none; }

/* Feld der Navigation */
#nav_container {
width: 960px;
height: 40px;
margin-bottom: 10px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9; }

/* Titel über Navigation entfernt */
#nav_heading {display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav {
list-style-type: none; }

/* Navi-Buttons */
li.nav_element {
width: 120px;
height: 40px;
float: left;
text-align: center;
border-right: 1px solid #c9c9c9;
background-color: #FFFFFF;
background-image: url(); }

/* Hover Navi-Button */
li.nav_element:hover { background-color: #202020; }

/* Linktexte in Navigation */
li.nav_element a {
display: block;
font-size: 15px;
color: #000000;
line-height: 40px;
text-decoration: none; }

/* Hover Linktexte Navigation */
li.nav_element a:hover { color: #FFFFFF; }

/* Seiteninhalt */
#content {
float: left;
width: 665px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9;
overflow: hidden; }

/* Titel Seiteninhalt + Titel über Box */
h2#title , #sidebar_heading {
padding: 5px 0px 5px 20px;
margin: -20px -20px 15px -20px;
background-color: #dddddd;
color: #000000;
font-size: 14px;
font-weight: normal; }

/* Link im Seiteninhalt */
#content a {color: #000080; }

/* Hover Link im Seiteninhalt */
#content a:hover {color: #008080; }

/* Rechte Box */
#sidebar_container {
float: right;
width: 200px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9;
overflow: hidden; }

/* Liste in rechter Box */
#sidebar_content ul {
list-style-type: square;
margin: 15px 0px 15px 25px; }

/* Linktexte in Box */
#sidebar_content ul li a {
color: #000000;
font-size: 14px;
text-decoration: none; }

/* Hover Linktexte Box */
#sidebar_content ul li a:hover { color: chocolate; }

/* Feld unter dem Design */
#footer {
width: 920px;
padding: 20px 20px 20px 20px;
margin: auto;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content{display:none;}
#counter{display:none;}


Ihr könnt die Position von Box und Seiteninhalt tauschen.
#content (Seiteninhalt) hat ein float: left; und sitzt deshalb Links.
#sidebar_container (rechte Box) hat ein float: right; und sitzt deshalb Rechts.
Tauscht einfach die beiden Eigenschaften aus 

Erklärung:
- background-color = Hintergrundfarbe
- background-image = Hintergrundgrafik, einfügen in leerer Klammer ()
- color = ist immer Textfarbe
- font-size = ist immer die Textgröße
- font-family = ist immer die Schriftart
- border: 1px solid #c9c9c9 = Rahmenstärke | Rahmenart | Rahmenfarbe


Schritt 2: Einfügen im Feld "Text UNTER Design"

Zitat:

<div id="footer"> Inhalt </div>

Ersetze das Wort Inhalt durch gewünschten Inhalt.


Schritt 3: Navigation anpassen
Im Menü oben ist Platz für ca. 7-8 erstellte Seite. Das ist abhängig von der Länge eurer Seitenititel.
Seiten, die oben zuviel sind, versteckt ihr mit dem Extra "versteckte Seiten"

Auf die versteckten Seiten verlinkt ihr im Feld "erste rechte Box". Einfügen Feld "erste rechte Box" :

Zitat:

<ul>
<li> <a href="/Titel.htm">Linktext 1</a> </li>
<li> <a href="/Titel.htm">Linktext 2</a> </li>
<li> <a href="/Titel.htm">Linktext 3</a> </li>
<li> <a href="/Titel.htm">Linktext 4</a> </li>
<li> <a href="/Titel.htm">Linktext 5</a> </li>
</ul>

Beispiel:
- Deine versteckte Seite hat die URL http://meineSeite.de.tl/Kontakt.htm
- füge im Code ein: /Kontakt.htm
- die komplette URL mit http://www..... ist nicht notwendig, da auf eigene Seiten verlinkt wird


Kopiert aus http://www.homepage-baukasten.de/forum/viewtopic.php?t=134832 , Beispiel 2


Wäre nett wenn mir jemand helfen kann


Zuletzt bearbeitet von grasshopperdesign am 05.06.2012, 21:00, insgesamt einmal bearbeitet
Beitrag26.06.2012 um 07:30 (UTC)    
Titel:

/push

Brauche immernoch Hilfe
Beiträge der letzten Zeit anzeigen:   


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