Probetag vorbereitung

JoLe05 · 07.06.2012

Hallo Leute!

Ich habe einen Probetag bei einer Webdesign/programmier firma und habe folgendes mail bekommen...

Quote:
Für den Probetag nächste Woche wäre es toll, wenn du dir generell CSS und HTML (auch CSS3 und HTML5) sowie jQuery ansehen könntest. Als Aufgabe bekommst du ein Design von einer Website, dass du mittels den vorab genannten Web-Technologien umsetzen wirst. In der Aufgabe enthalten sind beispielsweise ein Accordion, dass mittels jQuery gebaut wird und ein Dropdown-Menü, bei dem du ohne JavaScript auskommen solltest.

Der Probetag ist am Dienstag und ich habe noch keine Ahnung von jQuery... Als erste möchte ich mir anschauen wie genau das dropdown menü ohne java script funktioniert... könntet ihr mir ein paar tips geben wo ich anfangen soll...

Mein stand ist, ich habe gute kenntnisse in html und css...

Pixelverwender · 07.06.2012

AW: Probetag vorbereitung

Tipp:

nielsv · 07.06.2012

AW: Probetag vorbereitung

jQuery Accordion Demo und Doku: http://jqueryui.com/demos/accordion/

Und mit "guten" Kenntnissen in HTML und CSS solltest du auch in der Lage sein ein Dropdownmenü ohne Js zu erstellen

Aber als Inspiration kannst du dir ja mal http://net.tutsplus.com/tutorials/h...o-build-a-kick-butt-css3-mega-drop-down-menu/ anschauen...

Viel Erfolg bei deinem Probetag.

JoLe05 · 07.06.2012

AW: Probetag vorbereitung

danke für die tips für das menü hätte ich vorher gedacht ich nehme diese anleitung hier http://blog.online-marketing-solutions.com/dropdown-menu-mit-css-ohne-javascript/

werde das dann aber trotzdem mit dem css3 version versuchen....

ich hoffe ich bekomme das jquery accordion hin, sieht sehr schwierig aus
http://blog.online-marketing-solutions.com/dropdown-menu-mit-css-ohne-javascript/

JoLe05 · 09.06.2012

AW: Probetag vorbereitung

Hey Leute! das ist der html und css code für das menü... leider habe ich bei den beiden dropdown listen schwierigkeiten... der abstand links passt überhaupt nicht und ich weiss nicht wie ich den hinbekomme, und wenn ich auf die links klicken verschieben dich sich in die nächste zeile

irgendwelche ideen?

HTML-Code

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dropdown</title>
<link href="css/dropdown_selber2.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="mainnavi">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a>
                <ul class="dropdown_about">
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">About the road</a></li>
                    <li><a href="#">Specials</a></li>
                </ul>
            </li>
            <li><a href="#">Contacts</a>
                <ul class="dropdown_contacts">
                    <li><a href="#">one and only</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </li>       
        </ul>
    </div><!--mainnavi end-->
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */


a {
    text-decoration: none;    
}

#mainnavi {
    width: 960px;
    margin: 30px auto 0px auto;
}

#menu{
    list-style: none;
    height: 40px;
    width: 960px;
    
    /*rounded corners*/
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    
    /*gradients*/
    
    background: #d88462;
    background: -moz-linear-gradient(top, #e2a48b, #db8f70;) 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2a48b), to(#db8f70)); 
    
    /*border and shadow*/
    
    border: 1px solid #e6af98;
    
    -moz-box-shadow: inset 0px 0px 1px #e9b9a6;
    -webkit-box-shadow: inset 0px 0px 1px #e9b9a6;
    box-shadow: inset 0px 0px 1px #e9b9a6;
}
    

#menu li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #CCC;
    float: left;
    display: block;
    border: none;
    padding: 4px 10px 4px 10px;
    margin-left: 30px;
    margin-top: 7px;
    position: relative;
}

#menu li:hover {
    
    /*background and rounded corners*/
    
    background: #f6e4dc;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    
    /*shadow*/
    
    -moz-box-shadow: inset 0px 0px 1px #e9b9a6;
    -webkit-box-shadow: inset 0px 0px 1px #e9b9a6;
    box-shadow: inset 0px 0px 1px #e9b9a6;
}

.dropdown_contacts, 
.dropdown_about {
    position: absolute;
    left: -999em;
    
    
    
    
    /*background and rounded corners*/
    
    background: #f6e4dc;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    
}

#menu li:hover .dropdown_contacts,
 #menu li:hover .dropdown_about{
    left:0px;top:auto;
}

manfred_hst · 10.06.2012

AW: dropdown menü probs

Hi JoLe05,
Du solltest deinen
.dropdown_contacts,
.dropdown_about {
position: absolute;
left: -999em;
eine Breite zuweisen, ca. 150 px.
und in Deinen gradients steht ein Semikolon falsch,
gruß
Manfred

Minaya · 10.06.2012

AW: dropdown menü probs

Hallo JoLe05,

Es reicht auch vollkommen seine Frage nur 1x zu stellen, denn auch so wirst du Hilfe erhalten. Ich möchte dich bitten in Zukunft etwas mehr Geduld zu beweisen und deine Fragen auf ein Thema zu beschränken, und nicht aus Angst dass du keine Antwort erhältst, gleich zusätzlich ein neues Thema mit der gleichen Frage zu eröffnen.

MfG
Minaya

JoLe05 · 11.06.2012

AW: Probetag vorbereitung

@ Minaya: entschuldigung wird nie mehr vorkommen

und danke für eure hilfreichen kommentare, sollte hoffentlich nix mehr schief gehen morgen