Zwei Fragen zu meinem Design ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufbau
auto
bild
code
design
frage
grafik
header
http
kontakt
list
machen
monitor
navigation
nehmen
rahmen
tag
unterseite
url
verweis
-
Hallo,
ich habe dieses tag/design">Design erstellt: http://www.biwidesign.lima-city.de/Untitled-1.html
Nun möchte ich, dass die Menüleiste sich mit dem Rahmen verzieht.
Und mein zweiter Wunsch ist es, dass der Rahmen sich an einem Punkt nicht mehr weiterverzieht.
Wie geht das ??
Danke im Vorraus -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ich werde nicht so ganz schlau aus deiner Fragestellung, ebenso, wie in deinem anderen Beitrag, warum postest du die nicht zusammen, aber ich habe mal Lust etwas rumzuraten.
Und zwar rate ich, dass du einen IE benutzt, zum entwickeln von Websites, die mit Abstand schlechteste Wahl, zum anderen tippe ich auf einen Bildschirm mit 1024x768 px, wenn eine oder beide Vermutungen stimmen, dann weiß ich auf jedenfall, schonmal, dass du daran denken solltest, dass nicht alle Monitore gleich groß sind, zum anderen, dass der IE in Deutschland hinter dem Firefox steht! -
biwidesign schrieb: Nun möchte ich, dass die Menüleiste sich mit dem Rahmen verzieht.
Dafür kannst du aber kein Bild nehmen, das würde beim Verziehen letztlich nur verpixeln: Du kannst aber wie schon bereits geschehen alles erstmal in ein div packen - bei dir mit id = page. Du färbst den Hintergrund von #header grau und sagst, dass dieser die ganze ihm mögliche Breite annehmen soll "width:100%;".
Das orange Kästchen kannst aber als Grafikelement nehmen und einfügen. Das #header div sollte nicht leer sein - also mit Navigation dann auffüllen und Überschrift etc.
biwidesign schrieb: Und mein zweiter Wunsch ist es, dass der Rahmen sich an einem Punkt nicht mehr weiterverzieht.
CSS-Eigenschaft: max-width
biwidesign schrieb: wie baue ich bei dieser Seite: http://www.biwidesign.lima-city.de/Untitled-1.html das Menübild so um,
Möglich ist das schon, der Aufwand ist aber zu groß. Zum einen scheint mir dies keine Standardschrift zu sein → @font-face, zum anderen muss man dann genau auf Abstände etc. achten.
dass es kein Bild mehr ist sondern mit HTML und CSS gebaut ist ??
Nimm doch diesen orangen Kasten als Grafik und mach es in etwa so:
HTML:
<h1>biwidesign - Möbel- und Messegestaltung</h1>
CSS:
Natürlich sind das ausgedachte Angaben;)h1 { float:right; margin: 10px 10px 0 0; height:100px; width:100px; background:url(img/logo.png) no-repeat center; text-indent:-9999px; } #header {overflow:hidden;}
Edit: Verbesserung
Beitrag zuletzt geändert: 29.5.2010 11:25:52 von werktags -
???
#header{
width:100%;
height:165px;
background: url(Bilder/design_03.jpg) center no-repeat;
margin:0 auto;
}
was macht denn das bild beim header?
füge das lieber in den header-div als img
Das sind zwei änderungen:
CSS(mit Änderung weil rumheulen von anderen):
#header{
width:843px;
height:158px;
margin:0 auto;
}
HTML:
<body>
<div id="page">
<div id="header"><img src="Bilder/design_03.jpg" alt="Head" title="Textbeispiel"></div>
<div id="content">
Hier finden sich Inhalte.
</div>
<div id="footer"></div>
</div>
</body>
Mfg Min
Beitrag zuletzt geändert: 27.5.2010 15:10:50 von minalex -
minalex schrieb: was macht denn das bild beim header?
Warum?
füge das lieber in den header-div als img
Da anscheinend viele nicht genau wissen, das Bild nicht gleich Bild ist, könnten wir mal versuchen diese feine Unterscheidung einzuführen:
Bild: Als Bild sollte man das bezeichnen, was einen inhaltlichen Aspekt hat. Es sollte eine gewisse Information tragen - daher wird es in einen inhaltlichen Tag verpackt "img" und mit Alternativtext gekennzeichnet. Beispiele sind Diagramme, Urlaubsbilder, etc.
Grafik: Eine Grafik dient in erster Linie dem Aspekt des Layouts/Designs. Es wird keinerlei tragende Information vermittelt. Sie dient zum Aufbau und Gestaltung einer Webseite. Es wird kein semantisches Tag versehen und gehört in das CSS bzw. selten als img-Tag ohne Alternativtext.
Man kann sich nun sicherlich darüber streiten, dass ein Logo auch informationstragend ist - letztlich gehört es aber zur Gestaltung! -
@werktags: Ist wohl kein BILD? Ich sehe da Verweise auf Unterseiten, das sind meiner Meinung nach Information...
Naja gut, aber ich frage mich trotzdem warum jemand ein "Bild" mit (wahrscheinlich sind das ) Verweise zu Unterseiten,
als "Hintergrundgrafik" eines Div's verwendet...
@Biwidesig:
Wollen sie dann noch die Verweise auf dem Bild (meine das: Home, About, Produkte, Messen und Kontakt) verlinken?
Mfg Min
Beitrag zuletzt geändert: 27.5.2010 14:36:52 von minalex -
minalex schrieb:
was macht denn das bild beim header?
füge das lieber in den header-div als img
Das sind zwei änderungen:
CSS:
#header{
width:100%;
height:165px;
margin:0 auto;
}
HTML:
<body>
<div id="page">
<div id="header"><img src="Bilder/design_03.jpg" alt="Head" title="Textbeispiel"></div>
<div id="content">
Hier finden sich Inhalte.
</div>
<div id="footer"></div>
</div>
</body>
und selbst gesehen?
deine Änderung bringt einen Vorteil von exakt: 0
@werktags hat es eigentlich schon mit am besten dargestellt, vom ding her sieht das HTML welches für die Seite gebraucht wird so aus:<!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" dir="ltr" lang="de" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title>biwidesign</title> <style type="text/css">@import url('layout.css');</style> </head> <body> <div id="wrapper"> <h1 id="header">biwidesign - Möbel- und Messegestaltung</h1> <ul id="navigation"> <li><a href="home">Home</a></li> <li><a href="about">About</a></li> <li><a href="produkte">Produkte</a></li> <li><a href="messen">Messen</a></li> <li><a href="kontakt">Kontakt</a></li> </ul> <div id="content"> <p>foo bar blablabla schalala</p> </div> <adress id="footer"><a href="impressum">Impressum</a> | <a href="kontakt">Kontakt</a></adress> </div> </body> </html>
Da bricht sich keiner einen Zacken aus der Krone, sich ein wenig gedanken über den Aufbau seiner Seite zu machen... so nun aber zu dem CSS, damit das ganze so aussiht, wie es soll:
so gesehen gibt es da nur eine Stolperfalle, die absolute positionierte Navigation, aber da gehe ich einfach mal davon aus, dass es keine Monitore in der Größenordnung <720px gibt, die nicht unter handheld fallen und für die habe ich ja ein eigenes Layout!@media screen, projection { * { margin:0; padding:0; } #wrapper { width:80%; max-width:843px; margin:0 auto; position:relative; } #header { height:165px; background:#696469 url(Bilder/logo.png) no-repeat right center; font-size:0; line-height:0; color:transparent; } #navigation { position:absolute; top:0; left:0; margin:20px; list-style:none; } #navigation li { list-style:none; } #navigation li a { color:#eee; text-decoration:none; font:normal normal normal 10px Arial,"sans-serif"; } #content { border:2px solid #696469; height:500px; overflow:auto; } #footer { /* Hier hat der Verfasser noch nichts dargestellt, wie er es gern sehen würde! */ } } @media print, handheld { * { margin:0; padding:0 } #header { background: transparent url(Bilder/print-logo.png) no-repeat right top; font:normal normal normal 15pt Arial,"sans-serif"; } #navigation { list-style:none; overflow:hidden; } #navigation li { list-style:none; float:left; border-right:1px solid #696469; padding:.2em .4em; } #footer { border-top:1pt solid #696469; } } @media print { #navigation { display:none; } }
Tja, ich hoffe das hilft einigen weiter, ich habs noch nicht getestet, aber sollte soweit passen...
Ah und ich gehe davon aus, dass nur das logo als Bild gespeichert wird, nicht der menu-kram und so...
Beitrag zuletzt geändert: 27.5.2010 14:52:43 von nemoinho -
Danke an alle die mir geholfen haben
Habe jetzt aber noch eine Frage:
Wie füge ich das orangene Bild als Grafikelement rechts in den Header ein.
Ich habe veresucht das Bild einzufügen es hat sich dann jedoch über die ganze Weite des Headers ausgebreitet.
Wie geht das ?? -
*grübel* ...... ich hatte doch heute vormittag hier schonmal geantwortet.... wiedermal gelöscht?
Naja.
{#header img {width: XXXpx; height:XXXps; float:right;}
eventuell noch mit margin-right und margin-top den Abstand zum Rand regeln.
hoffe das hilf dir. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
