Box erstelln?

Cascading Style Sheets (CSS ist eine praktische Code-Sprache, die einmal erstellt für das Aussehen der ganzen Seite gilt. So können z. B. Schriftattribute wie Farbe, Schriftart und Link-Farben und Formatierung bequem eingestellt werden.) - Fragen - Antworten - Tipps dazu hier ..

Moderator: lauras

Beiträge bitte im neuen Forum

Box erstelln?

Beitragvon Baldry » Samstag 28. Januar 2012, 17:45

Guten tag

Ich hab das problem das ich es nicht schaffe 2-3 boxen nebeneinander aufzustellen.Soll heißen= Navi leiste-Text-Text
jedesmal wenn ich es versuche wird die Navi leiste nach unten geschoben so als wäre es nur 1 großer kasten und nicht 3 nebeneinander liegende
ich post es mal
CSS
Code: Alles auswählen
 


.style
{
background-color:white;
width:500px;
height:800px;
margin-left:15em;
front:normal 0.8em Verdana,  sans-serif;
color:black;
}
#news
{
font:normal 0.8em Verdana,  sans-serif;
color:blue;
margin-left:9em;


}

#navlist
{
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 3em;
width: 12em;
font: normal 0.8em Verdana, sans-serif;
margin-top:10em;
}

#navlist li
{
list-style: none;
margin: 0;
font-size: 1em;
}

#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}

#navlist a#current { border-color: #5bd #035 #068 #f30; }

#navlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}

#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}

#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}

#navlist a:hover, #navlist a#current:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}

#navlist a:active, #navlist a#current:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;


HTML
Code: Alles auswählen
<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="ISO-8859-1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <meta name="keywords" content=""/>
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)"/>

    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
        <h1>Willkommen auf ....</h1>
                                      <div  style="
    margin: auto;

">

</div>



<div id="navcontainer">

   <ul id="navlist">
                          <li> <h2><p id="news"  >News<p/></h2></li>                <p class="style">hi</p>

      <li id="active"><a href="#" id="current">Home</a></li>

      <li><a href="#">Beats</a></li>
      <li><a href="#">Information</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Impressium</a></li>

   </ul>
</div>



</body>
</html>


die navi leiste ist nicht von mir hab sie kopiert :D
bin noch recht neu und am lernen

Danke
Baldry
HTML-Suchnase
 
Beiträge: 5
Registriert: Samstag 14. Januar 2012, 19:18

Re: Box erstelln?

Beitragvon Yamram » Samstag 28. Januar 2012, 18:02

Also, zum ersten würde ich dir mal raten, ein wenig mehr zu lernen. CSS ist für die Gestaltung wohl das wichtigste... Um mehrere Boxen nebeneinander zu positionieren solltest du mal float oder display: inline benutzen. Ich bin ehrlich: Ich habe mir nicht deinen ganzen Code angeguckt aber du solltest mal ein wenig CSS lernen (;
Benutzeravatar
Yamram
HTML-Sonderfall
 
Beiträge: 616
Registriert: Samstag 5. Februar 2011, 20:05
Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Re: Box erstelln?

Beitragvon lauras » Samstag 28. Januar 2012, 18:20

Zuerst einmal brauchst zu DREI Boxen in deinem Code, nicht nur zwei ;),

Also:

Code: Alles auswählen
<div id="navcontainer"> deine Navi </div>
<
div id="textbox1"> deine zweite Box </div>
<
div id="textbox2"> deine dritte Box Box </div> 


Dann benutzt du CSS, insbesondere float, um deine Boxen nebeneinander anzuordnen. Weiterhin solltest du jeder Box eine eindeutige Hintergrundfarbe zuweisen (vorerst), damit du siehts wo deine Boxen sich befinden.

Da ich vermute, dass du nicht weißt, wie float funktioniert, gibt es eine gute Erklärung, die du dir am besten mal anschaust und erst weitermachst, wenn du es verstanden hast:
CSS-Eigenschaft float

Und danach kannst du weitermachen mit Design oder was auch immer du tun möchtest.

@Yamram: Das bringt ihm bestimmt viel, wenn er dann display:inline; benutzt ohne jegliche Erklärung warum oder was das bewirkt.
Benutzeravatar
lauras
Moderator
 
Beiträge: 2114
Registriert: Samstag 3. November 2007, 22:08

Re: Box erstelln?

Beitragvon Yamram » Samstag 28. Januar 2012, 18:29

lauras hat geschrieben:@Yamram: Das bringt ihm bestimmt viel, wenn er dann display:inline; benutzt ohne jegliche Erklärung warum oder was das bewirkt.


Ich habe ihm extra gesagt, er soll float und display lernen. Es gibt bestimmt Seiten, wo das besser erklärt ist, als ich es kann (:
Benutzeravatar
Yamram
HTML-Sonderfall
 
Beiträge: 616
Registriert: Samstag 5. Februar 2011, 20:05
Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink


Beiträge bitte im neuen Forum

Zurück zu CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron