|
|||
Bilder skalieren
Hallo,
Bin neu hier und ich hoffe ihr könnt mir helfen! und zwar hab ich eine Webseite erstellt doch auf der Hauptseite (Index.html) will ich ein Logo einbinden... Habs auch hinbekommen aber das Logo setzt sich unter der Navigation.. mit padding left kriege ich es schon mal soweit nach rechts wie ich es haben will aber nicht nach oben kann mir einer sagen wie ich es da hinkriege? Gruß Schorti |
Sponsored Links |
|
|||
html und css code
html code:
<!Doctype html> <html> <head> <title> ten Website </title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <header> <h1> ten </h1> <h2> - </h2> <h3> Website </h3> </header> <nav> <ul> <a href=" "><li> Startseite </li></a> <a href=" "><li> Wir über uns </li></a> <a href=" "><li> Partnerseiten </li></a> <a href=" "><li> Terminkalender </li></a> <a href=" "><li> Login </li></a> </ul> </nav> <section> <article> <h1><img src="Logo.png" width="371" height="411" alt="" /></h1> <h2> Herzlich Willkommen beim ten.de! Wir freuen uns Sie auf unserer Internetseite begrüßen zu dürfen Hier erhalten Sie alle Informationen rund um unsere Internetseite die wir haben. Wir wünschen Ihnen viel Spaß! </h2> </article> </section> <footer> <p> © Schorti Online</p> </footer> </body> </html> Css code: * { padding: 0px; margin: 0px; font-family: Arial, Verdana, sans-serif; } header { height: 170px; background-color: #003636; border-radius: 10px; } body { width: 800px; background-color: #000000; margin: 25px auto; } header h1 { font-family: verdana; font-style: italic; padding-left: 50px; padding-top: 25px; color: #00005C; font-size: 30pt; } header h2 { font-family: verdana; font-style: italic; color: #00005C; font-size: 30pt; padding-left: 400px; } header h3 { font-family: verdana; font-style: italic; color: #00005C; font-size: 30pt; padding-left: 600px; } nav ul { list-style-type: none; } nav li { display: block; margin-right: 600px; background-color:#003636; padding-right: 35px; padding-left:15px; padding-top: 20px; padding-bottom: 10px; font-weight: bold; } nav { margin-top: 20px; } nav a { text-decoration: none; color: #00005C; } section { width: 800px; padding-left: 40px; } article { margin-bottom: 25px; margin-left: 16px; color: #000080; } footer{ text-align: center; padding: 10px; background-color:#003636; border-radius: 10px; margin-top: 400px; } footer p{ font-size: 12pt; } warum der aufeinmal jetzt das als ganzen block macht weiß ich auch nicht... |
|
|||
Hallo!
Logisch... wo sollte es auch sonst sein? Blockelemente ordnen sich nunmal untereinander an. Wenn du (Block-)Elemente nebeneinander anordnen möchtest, dann solltest du dich mit "float" auseinandersetzen! Ich empfehle »Little Boxes« - HTML und CSS lernen - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)
__________________
Gruß schatzi |
|
|||
Hallo!
Zitat:
Nimm mal das "display:block" raus und du wirst keine Veränderung feststellen, denn deine "nav li" sind bereits Block-Elemente. Darüberhinaus ist deine Navi auch falsch aufgebaut: Die "a href" gehören in die "li" und nicht umgekehrt. Ein Block-Element darf nicht in einem Inline-Element stehen!
__________________
Gruß schatzi |
|
|||
ok.. und was trage ich dann ein wenn ich die in einer Linie haben will wenn das schon automatisch so ist? und neee das ist mit absicht soo das änder ich noch aber ist auch egal es geht ja um das bild wie kriege ich das neben der navi und unter dem header?!
|
|
||||
Hallöchen,
da HTML & CSS nicht viel mit einer Schießbude gemein hat (durch Glück gewinnt man hier nämlich nix) möchte ich deinem persönlichen Glück ein wenig auf die Sprünge helfen: Little Boxes. Wenn du nicht weißt wie man eine Navigation korrekt aufbaut und auch float noch nie benutzt hast, dann fehlen dir die Grundlagen, die für den erfolgreichen Einsatz dieser Werkzeuge tatsächlich vonnöten sind. Viele Grüße, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrund wird nicht angezeigt | maxx | CSS | 6 | 14.10.2012 18:27 |
Hilfe!!! mein Homepagelayout funktioniert nicht! | maxx | CSS | 5 | 14.10.2012 07:21 |
Wie Bilder automatisch skalieren und später umbrechen bei resonsive Webdesign ? | iceman_fx | CSS | 1 | 07.09.2012 08:32 |
Bilder und Hintergrundbilder unproportional skalieren | Jormungand | CSS | 9 | 19.03.2012 19:43 |
Bilder ohne Verzerrung skalieren | SpecialFighter | (X)HTML | 8 | 20.08.2011 00:43 |