Zur Navigation

Text und Bild Datei im Header nebeneinander

1 Turboman

Ich habe folgendes Problem

Ich habe einen Header, in diesen Header soll links eine Beschriftung, rechts ein Bild. Wie bekomme ich das hin?


  <div id="header"> 
   <div id="headerschrift">
    <h1>H E W A </h1> 
    <h2>Design & Marketing</h2></div>
   <img src="pics/grafik-tablett.jpg" >

  </div>


bis hierhin hat alles gestimmt und sieht entsprechend gut aus, aber dann soll das Bild rechtsbündig rein

Vielen Dank für die Infos

habe schon einiges versucht, weiss aber im mom nicht weiter

wie muss das in der css aussehen, dass es auch richtig dargestellt wirdalso der Text links und das Bild rechtsbündig



#header {
	align: center;
	width: 1060;
	height: 170;
	background: #af97bf;
	border-top-left-radius: 20;
	border-top-right-radius: 20;
	border-bottom-left-radius: 10;
	border-bottom-right-radius: 10;
background: #af97bf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #af97bf 0%, #cedce7 27%, #cedce7 70%, #af97bf 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#af97bf), color-stop(27%,#cedce7), color-stop(70%,#cedce7), color-stop(98%,#af97bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* IE10+ */
background: linear-gradient(135deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af97bf', endColorstr='#af97bf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
	}
#headerschrift {
	text-align:left;
	font-family:Algerian, "Times New Roman", Times, serif;
	padding-top:5px;
	padding-left:100px;
	font-size: 18px;

	}

Bis hierin sieht es so aus, wie ich es brauche, aber dann

16.08.2013 15:56

2 Jörg

Du kannst die Elemente mit float nebeneinander anordnen:

<div id="header"> 
    <div id="headerschrift">
        <h1>H E W A</h1> 
        <h2>Design &amp; Marketing</h2>
    </div>
    <div id="bild">
        <img src="pics/grafik-tablett.jpg" alt="">
    </div>
</div>

#header {
width:1060px;
overflow:auto;
}
#headerschrift {
float:left;
width:800px;
}
#bild {
float:right;
width:200px;
}

16.08.2013 17:19

1 Forenmitglied fand diesen Beitrag gut

3 Turboman

da hautds mir aber alles weg,

www.hewa-design.de


<body>
 <div id="site">
  <div id="header"> 
    <div id="headerschrift">
        <h1>H E W A</h1> 
        <h2>Design &amp; Marketing</h2>
    </div>
    <div id="bild">
        <img src="pics/grafik-tablett.jpg" alt="">
    </div>
   </div>
  </div>



</body>
</html>


das ist der html-code, aber wem sage ich das



body {
	background-color:#394d56;		
	}
#site {
	width:1060;
	margin:0;	 
	}	
#header {
	align: center;
	width: 1060;
	overflow:auto;
	height: 170;
	background: #af97bf;
	border-top-left-radius: 20;
	border-top-right-radius: 20;
	border-bottom-left-radius: 10;
	border-bottom-right-radius: 10;
background: #af97bf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #af97bf 0%, #cedce7 27%, #cedce7 70%, #af97bf 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#af97bf), color-stop(27%,#cedce7), color-stop(70%,#cedce7), color-stop(98%,#af97bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* IE10+ */
background: linear-gradient(135deg, #af97bf 0%,#cedce7 27%,#cedce7 70%,#af97bf 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af97bf', endColorstr='#af97bf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
	}
#headerschrift {
float:left;
width:700px;
margin-left: 45px;
margin-top: 15px;
}
#bild {
float:right;
width:200px;
margin-right:65px;
padding-top:5px;
}
	

Du kannst mir dann auch sagen, was ich irgendwo falsch gemacht habe, danke im Voraus

16.08.2013 18:14

4 Jörg

da hautds mir aber alles weg,

Was meinst du damit?

Überschriften und Bild werden ja nebeneinander dargestellt?

Du kannst mir dann auch sagen, was ich irgendwo falsch gemacht habe

Ich würde noch eine Doctype-Angabe einfügen.

z.B. für HTML 5:

<!DOCTYPE html>


... oder für HTML 4.01 z.B.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Dann gibt es weniger Intrerpretationsspielraum für die unterschiedlichen Browser

16.08.2013 18:27

5 Turboman

Zitat von Jörg
da hautds mir aber alles weg,

Was meinst du damit?

Überschriften und Bild werden ja nebeneinander dargestellt?

Du kannst mir dann auch sagen, was ich irgendwo falsch gemacht habe

Ich würde noch eine Doctype-Angabe einfügen.

z.B. für HTML 5:

<!DOCTYPE html>


... oder für HTML 4.01 z.B.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Dann gibt es weniger Intrerpretationsspielraum für die unterschiedlichen Browser

wenn du die css anweisungen gesehen hast, waren oben links und rechts 25px radius eingebaut, und unten 15px
die sind nicht mehr zu sehen, ansonsten alles richtig
Der Hintergrund stimmt so zwar noch nicht, den muss uich mir noch anpassen das andere mit Doctype etc, kommt noch alles

16.08.2013 18:49 | geändert: 16.08.2013 18:50

6 Jörg

Die Doctype-Angabe würde ich immer von Anfang an einfügen, denn diese bestimmt den Modus, in welchem die Browser die Seite anzeigen. Außerdem kann man die Seite dann vernünftig validieren und Fehler ausfindig machen, die sich auch auf die Darstellung des Layouts auswirken können. In diesem Fall fehlt der Seite z.B. noch das öffnende <html>-Tag

16.08.2013 18:58 | geändert: 16.08.2013 19:00

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)





[BBCode-Hilfe]