Bilder skalieren

Schorti · #1 (**permalink**) 02.10.2013, 17:38

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

schatzi · #2 (**permalink**) 02.10.2013, 18:06

Hallo!

Gib doch bitte einen Link zu deiner Seite!
Ohne deinen Code zu kennen, ist ernsthafte Hilfe unmöglich.

Schorti · #3 (**permalink**) 02.10.2013, 21:28

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...

schatzi · #4 (**permalink**) 02.10.2013, 21:53

Hallo!

Zitat:

Zitat von Schorti

aber das Logo setzt sich unter
der Navigation..

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)

Schorti · #5 (**permalink**) 03.10.2013, 10:58

Hey..
Ja aber ich hab ja nur der navigation gesagt
das sie sich als block setzten soll sonst wäre sie
ja in einer Line...

Gruß Schorti

schatzi · #6 (**permalink**) 03.10.2013, 16:45

Hallo!

Zitat:

Zitat von Schorti

Ja aber ich hab ja nur der navigation gesagt
das sie sich als block setzten soll sonst wäre sie
ja in einer Line...

Äh, nö!
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!

Schorti · #7 (**permalink**) 03.10.2013, 21:26

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?!

schatzi · #8 (**permalink**) 03.10.2013, 21:28

Hallo!

Die Antwort auf alle deine Fragen lautet: float

Schorti · #9 (**permalink**) 04.10.2013, 11:52

hmm ok ich versuch mal mein glück danke...

lottikarotti · #10 (**permalink**) 04.10.2013, 11:59

Hallöchen,

Zitat:

Zitat von Schorti

hmm ok ich versuch mal mein glück danke...

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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