Hilfe! Zeilenumbruch problem!!

ckasper1985

Hallo Leute,
ich muss immoment in Rahmen eines projektes ein online Portfolio erstellen.
Am oberen rand der website habe ich links das Logo und auf der selben höhe die Navigationsbutton.
So sollte es zumindestens aussehn. in Explorer klappt dies auch prima aber Firefox will nicht so ganz mitspielen und macht nach den Logo einen Zeilenumbruch.
hier ist der Quelltext! danke im vorraus!!

PHP

....
<div id="menu">
        <a href="main.html"><img src="logo1.jpg" alt="Home"/></a>
        <p id="menutext">
            <a href="motion.html">motion |</a>
            <a href="still.html">| still |</a>
            <a href="study.html">| study |</a>
            <a href="literature.html">| literature |</a>
            <a href="cv.html">| cv |</a>
            <a href="contact.html">| contact </a>
        </p>
</div>
.....

Alles anzeigen

PS: wichtig ist, das es noch valide bleibt.

driver

ohne restliches html und css leider sehr nutzlos.
kann man nur sagen.. schaut sauber aus...

und drauf tippen, dass du mal margin:0; und padding:0; verwenden solltest

ckasper1985

okey dann hier mal der komplette quelltext:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>ChristianKasper | 2008</title>
    <link rel="stylesheet" type="text/css" href="style.css"></link>

</head>
<body>


<div id="menu"><nowrap="nowrap">
        <a href="main.html"><img src="logo1.jpg" alt="Home"/></a>
        <p id="menutext">
            <a href="motion.html">motion |</a>
            <a href="still.html">| still |</a>
            <a href="study.html">| study |</a>
            <a href="literature.html">| literature |</a>
            <a href="cv.html">| cv |</a>
            <a href="contact.html">| contact </a>
        </p>
        </nowrap>
</div>


<div id="bg"></div>


<div id="post">
    <div class="portfolioBlock">


    <h2>
            Written on <strong>Monday</strong>, 05 of January, 2009 at 9:53 pm
    </h2>
    <br />
            <img src="fenkeladd.jpg" width="292" height="413" alt="Fennel"></img>

    <h1>
          TEXTTEXTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    </h1>
    </div>

</div>
</body>
</html>

Alles anzeigen

und dann hier noch der stylesheet:

PHP

a:link { text-decoration:none; color:#000000; }
a:visited { text-decoration:none; color:#000000; }




body {
    height:100%; /* Max 100% hoogte in IE */
    max-height:100%; /* Max 100% hoogte in browsers */
    background-color:#FFFFFF;
    background-image: url('bg1.png');
    margin:0;
    padding:0;
}


/* Text */
h1 {
    font-size:13px;
    margin:0;
    margin-left:5px;
    font-weight:normal;
    color:#333333;
    background-color:#FFFFFF; 
}
/*update/info */
h2 {
    font-size:11px;
    margin:0;
    margin-left:5px;
    font-weight:normal;
    color:#333333;
    background-color:#FFFFFF; 
    border-bottom:2px solid #333333;
}






/*aktuelle Seite*/
h4{
    background-color:#FFFFFF; 
    font-weight:100;
    font-family:Kalinga;
    font-size:17px;
    letter-spacing:-0.05em;
    font-variant:small-caps;
}


img{
    border: none;
}




#menu{
        margin-left: 0.5%;
        margin-top: 0.5%;
}


/*menu navigation*/
#menutext{
        position: absolute;
        margin-top: 5px;
        margin-left:10%;
        font-family:Kalinga;
        font-size:20px;
        letter-spacing:-0.05em;
        font-variant:small-caps;
}






#bg {
    position:relative;
    top: 0px;
    width:1280px;
    height:768px;
    background-image: url('bg3.jpg');
    background-repeat: no-repeat;    
    background-attachment: fixed;
}


#post{
    width:650px;
    position:absolute;
    top:35px;
    padding:20px 0 0 0;
    margin-left: 20%;
}




.portfolioBlock {
    padding:5px;
    background-color:#FFFFFF;
    background-image: url('bg1.png');
    border:1px solid #CCCCCC;
}

Alles anzeigen

Danke dir schonmal!!

Macrosdesign

setz mal

Code

* {
   margin: 0;
   padding: 0;
}

an Anfange deiner CSS-Datei.

mfg Cy

ckasper1985

okey du meinst so :

PHP

* {
   margin: 0;
   padding: 0;
}


a:link { text-decoration:none; color:#000000; }
a:visited { text-decoration:none; color:#000000; }




body {
    height:100%; /* Max 100% hoogte in IE */
    max-height:100%; /* Max 100% hoogte in browsers */
    background-color:#FFFFFF;
    background-image: url('bg1.png');
    margin:0;
    padding:0;
}


/* Text */
h1 {
    font-size:13px;
    margin:0;
    margin-left:5px;
    font-weight:normal;
    color:#333333;
    background-color:#FFFFFF; 
}
.....

Alles anzeigen

und wo genau muss ich den sheet * in dem quelltext einfügen?

driver

lass mal die position weg. besonders die position:absolute; im menü

@ macros
margin und padding hab ich oben schon vorgeschlagen.
hat aber leider nicht den gewünschten erfolg gebracht.

ckasper1985

die Positionen habe ich nun weggelassen, es sieht aber leider nun nicht so aus wie ich wollte. ich versuch es noch mal anders zu erklären.
(leicht veränder)

PHP

<div id="menu"> 
        <a href="main.html"><img src="logo1.jpg" alt="Home"/></a>


            <a href="motion.html">motion |</a>
            <a href="still.html">| still |</a>
            <a href="study.html">| study |</a>
            <a href="literature.html">| literature |</a>
            <a href="cv.html">| cv |</a>
            <a href="contact.html">| contact </a>

</div>

Alles anzeigen

logo1.jpg soll links angeordnet sein. ist es auch darf also so bleiben.
die buttons die danach folgen (motion, still, study, literature...) sollen nicht direkt hinter dem logo1.jpg angeordnet sein sondern mit einen bestimmt abstand.
wenn ich das Problem gelöst habe habe ich die homepage fertig. aber jetzt hänge ich schon seit einigen stunden an deisen problem

Elvis

Ich würde die Navigation als Liste auszeichen, was semantisch auf korrekt wäre und dann den Listenpunkten margin-left zuweisen.

ckasper1985

mhh also den berreich in <ul> </ul> setzen?!.
werde ich mal ausprobieren hört sich gut an.
danke...
edit:
klappt leider nicht.
liegt es an den <p id="menutext"> ? löst der nen zeilenumbruch aus?

Macrosdesign

Mach es mal so:

HTML

<div id="menu"> 
        <a href="main.html"><img src="logo1.jpg" alt="Home"/></a>

           <ul> 
            <li><a href="motion.html">motion |</a>          </li>
            <li><a href="still.html">| still |</a>          </li>
            <li><a href="study.html">| study |</a>          </li>
            <li><a href="literature.html">| literature |</a></li>
            <li><a href="cv.html">| cv |</a>                </li>
            <li><a href="contact.html">| contact </a>       </li>
           </ul>
          <br clear="left" />
</div>

Alles anzeigen

und dann dem stylesheet das hinzufügen:

HTML

#menu ul {list-style:none;}
#menu li {width:"breite deiner buttons";float:left;margin-left:10px;}

Unregistriert

leider bringt das auch noch nichts, aber danke dir.

Macrosdesign

Mach es mal so:

HTML

<div id="menu"> 
        <a href="main.html"></a>
        <img src="logo1.jpg" alt="Home"/>
           <ul> 
            <li><a href="motion.html">motion |</a>          </li>
            <li><a href="still.html">| still |</a>          </li>
            <li><a href="study.html">| study |</a>          </li>
            <li><a href="literature.html">| literature |</a></li>
            <li><a href="cv.html">| cv |</a>                </li>
            <li><a href="contact.html">| contact </a>       </li>
           </ul>
          <br clear="left" />
</div>

Alles anzeigen

und dann dem stylesheet das hinzufügen:

HTML

#menu ul {list-style:none;}
#menu li {width:"breite deiner buttons";float:left;margin-left:10px;}
#menu img {float:left}

so müsste das gehen...

Elvis

Natürlich löst ein Absatz einen Zeilenumbruch aus. Sonst wäre es ja auch kein Absatz. Deshalb ist die Liste der semantisch korrekte Weg eine Navigation auszuzeichnen.

sejuma

Den letzten Code von Macrodesign noch so ergänzen und dann bekommst du den Abstand (Wert anpassen):

Zitat

#menu img {float:left; margin-right: 100px;}

Tags