Bild einfügen und Position bestimmen?

cult7 · 4 Januar 2008

Ich habe eine html und eine css Datei. In die html Datei schreibe ich diversen Text etc. und den Rest will ich in css anpassen...

Wie man ein Bild in html einfügt weis ich schon, aber wie geht dass wenn ich es vom css aus machen möchte? Habe im IE bisher nur herausgefunden, dass es mit background-image geht, aber wie bestimme ich dann die Position wenn ich das Bild nicht über den kompletten Hintergrund haben möchte?

Danke
mfg
cult7

nichtsgeht · 4 Januar 2008

In dieser Form:

Code:

      background-image:url(bild.gif); 
      background-repeat:no-repeat;
      background-position:50px 50px;
      background-color:#FFFFFF;

voda · 5 Januar 2008

Selbe Frage

Hallo, selbes Problem habe ich auch!

Habe eine gif-Datei die ich über den Tag

Code:

<DIV aglin = "Center">

nicht positioniert wird. gibt es da eine Möglichkeit?

Hier der HTML-Code:

Code:

/title><meta
 http-equiv="content-type"
 content="application/xhtml+xml; charset=UTF-8" /><meta
 name="generator" content="Jonas John" /><meta
 name="description" content="put a good description in here" /><meta
 name="keywords" content="good,keywords" /><link
 rel="stylesheet" type="text/css" href="css/bluesky.css"
 media="screen, tv, projection" title="Default" /><link
 rel="alternative stylesheet" type="text/css"
 href="css/bluesky_large.css" media="screen, projection, tv"
 title="Larger Fonts" /><link rel="alternative stylesheet"
 type="text/css" href="css/print.css" media="screen"
 title="Print Preview" /><link rel="alternative stylesheet"
 type="text/css" href="css/handheld.css" media="screen"
 title="Small Layout Preview" /><link rel="stylesheet"
 type="text/css" href="css/handheld.css" media="handheld"
 title="Small Layout" /><link rel="stylesheet"
 type="text/css" href="css/print.css" media="print" /><link
 rel="top" href="index.html" title="Homepage" /><link
 rel="up" href="index.html" title="Up" /><link
 rel="first" href="index.html" title="First page" /><link
 rel="previous" href="index.html" title="Previous page" /><link
 rel="next" href="index.html" title="Next page" /><link
 rel="last" href="index.html" title="Last page" /><link
 rel="toc" href="index.html" title="Table of contents" /><link
 rel="index" href="index.html" title="Site map" /></head>
<body><div id="page"><div
 style="width: 996px; height: 44px;" id="header"><big><div
 aglin="center"><img style="width: 550px; height: 50px;"
 alt="" src="Bilder/Banner1.gif" align="middle" />

Hier der CSS-Code:

Code:

html * { 
    margin: 0; 
    padding: 0; 
    border: 0;
}
 
body {
    margin: 0.5em 0em 2em 0em;

    font-size: 100%;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    line-height: 1.1em;
    text-align: center;
    
    background-color: #A5DDF8;
    background-image: url(../images/background.png);
    background-repeat: repeat-x;
}
 
#page { 
    width: 70%; 
    text-align: left;  
    margin-left: auto; 
    margin-right: auto;  
} 


/* header: */

#header {
    position: relative; 
    width: 100%;
    height: 2.8em;
    color: #fff;
    vertical-align: middle;
    text-align: left;
} 


#header a:link, #header a:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 1.9em;
    letter-spacing: -0.1em !important;
    letter-spacing: -0.2em;
    line-height: 1.2em;
}


/* left column: */

#left {
    width: 24%; 
    float: left; 
    position: relative; 
    font-size: 0.8em;
}

div#nav {
    background-color: #fff;
    width: 90%;   
    border-right: 0.18em solid #4284B5;
    border-bottom: 0.16em solid #4284B5;
}
    
#nav ul {
    list-style-type: none;
    padding: 0.5em 0em 0.9em 0em;
}

#nav ul li {
    padding: 0.2em 0em 0.2em 0.9em;
    margin-right: 0.3em;
}

#nav a:link, #nav a:visited {
    color: #2E668B;
}
 
#nav a:hover, #nav a:active {
    color: #000;
}

div.left_box {
    background-color: #fff;
    width: 90%;
    margin-top: 1em;
    border-right: 0.18em solid #4284B5;
    border-bottom: 0.16em solid #4284B5;

}

div.left_box h3, div#nav h3 {
    margin: 0em;
    padding: 0.2em 0em 0.2em 1em;
    font-size: 0.8em;
    color: #fff;
    border-top: 0.1em solid #65B6E3;   
    border-left: 0.1em solid #65B6E3;   
    background-color: #4284B5;
    text-transform: uppercase;
    font-family: Verdana, Arial, sans-serif;
}

div.left_box p {
    margin: 0em;
    padding: 1em 1em 1em 1em;
}

div.left_box a:link {
    color: #2E668B;
}
    
div.left_box a:visited {
    color: #254A65; 
}
 
div.left_box a:hover, div.left_box a:active {
    color: #000;
}

div.inner_box {
    border-right: 0.15em solid #7BA5C6;
    border-bottom: 0.15em solid #7BA5C6;
}



/* content column: */

#content {
    float: right; 
    display: inline; 
    position: relative; 
    width: 75%; 
    font-size: 0.75em;
    
    background-color: #fff;

    border-right: 0.2em solid #4284B5;
    border-bottom: 0.2em solid #4284B5;
}

#content h1 {
    clear: both;
    margin: 0em 0em 0em 0em;
    padding: 0.5em 0em 0em 0.1em;
    font-size: 1.7em;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #FF6300;
    border-bottom: 0.05em solid #FF9853;
    line-height: 1em;
}

#content p {
    margin: 0em 0em 0.5em 0em;
    padding: 0.35em;
}

#path {
    font-family: Verdana, Arial, sans-serif;
    margin: 0em 0em 0em 0em;
    padding: 0.4em 0.6em 0.4em 0.6em;
    font-size: 0.9em;
    color: #2F5E80;
    background-color: #D0E7F4;
    border-right: 0.23em solid #7BA5C6;
}

#content a:link {
    color: #2E668B;
}
    
#content a:visited {
    color: #255270; 
}
 
#content a:hover, #content a:active {
    color: #000;
}

#content acronym {
    border-bottom: 1px dotted #4284B5;
    cursor: help;
    margin: 0;
    padding: 0;
}

#main {
    padding: 0.5em 1.5em 1.5em 0.7em;
    border-bottom: 0.2em solid #7BA5C6;
    border-right: 0.2em solid #7BA5C6;
}

div.img_left, div.img_right {
    border-bottom: 0.09em solid #4284B5;
    border-right: 0.1em solid #4284B5;
}

div.img_left {
    float: left; 
    margin: 0.5em 0.8em 0em 0em;
}

div.img_right {
    float: right; 
    margin: 0.5em 0em 0em 0.8em;
}

div.img_left img, div.img_right img {
    display: block;
    border: 0.35em solid #7BA5C6;
    margin: 0;
    padding: 0;
}

/* this clears floating (e.g images) */
br.clear {
    clear: both;
    display: none;
}


/* footer: */

#footer { 
    margin: 0em;
    padding: 0em;
    font-size: 0.6em;
    clear: both;
    color: #027BC1;
    text-align: right;
} 

#footer p {
    margin: 0em;
    padding: 0.1em;
}

#footer a:link, #footer a:visited { 
    color: #027BC1;
} 

#footer a:hover, #footer a:active { 
    color: #000000;
}

PS. Habe null Ahnung von CSS.:( Vileicht mit einem <Div Class> Befehl???

THX

voda · 6 Januar 2008

Hat denn keiner eine Lösung für mein Problem....:shock:

threadi · 6 Januar 2008

Es heißt

Code:

align

und NICHT

Code:

aglin

wie du schreibst.

Ein Bild per CSS zentrieren geht so:

Code:

div { text-align: center; }
img { margin: 0px auto; }

voda · 6 Januar 2008

Ich habe es jetzt so gemacht:

Code:

<div id="page"><div
 style="width: 996px; height: 44px;" id="header"><big><div
 class="mittig"><img style="width: 550px; height: 50px;"
 alt="" src="Bilder/Banner1.gif" align="middle" /></div></big><big><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></big></div><div
 id="wrapper"> <div id="content">

und in CSS

Code:

.mittig {
     text-align: center;
}

Jetzt ist das Bild in der Mitte aber fest fixiert.
Es soll aber bei verschiedenen Auflösungen immer in der Mitte bleiben.
Warum passt es sich nicht automatisch an?

Code:
Es heißt

Code:

align

und NICHT

Code:

aglin

wie du schreibst.

Ouuu da ist eine Drehung reingerutscht, aber bei Korrektur selbe Problem wie oben.

threadi · 6 Januar 2008

Du gibst für das div in dem das Bild zentriert ist eine Breite von 996 Pixeln an. Entferne das, dann passt es sich vermutlich (*) auch jeweils an.

(*) kenne ja den Rest des Codes nicht ...

Gelöschtes Mitglied 3007 · 6 Januar 2008

Code:

align="middle"

wo isn bei dir middle?

voda · 6 Januar 2008

threadi schrieb:
Du gibst für das div in dem das Bild zentriert ist eine Breite von 996 Pixeln an. Entferne das, dann passt es sich vermutlich (*) auch jeweils an.

(*) kenne ja den Rest des Codes nicht ...

Entferne ich die 996px ist das Bild links am Rand. Da nutzt kein Align-Tag den ich davor setzte noch den class-Tag.

Das kann doch nicht war sein. Jedes Bild lässt sich zentrieren und passt sich bei geänderte Auflösung an nur nicht das Bild.

Hier der nochmal der Code:

Code:

</head>
<body><div id="page"><div
 style="width: 0px; height: 44px;" id="header"><big><div
 align="center"><img style="width: 550px; height: 50px;"
 alt="" src="Bilder/Banner1.gif" /><br /></div></big><big><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></big></div><div
 id="wrapper"> <div id="content"><!-- Flash-Uhr Beginn--><object
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 id="digitaluhr" align="right" height="25"
 width="85"><param name="movie"
 value="http://www.e-reveal.de/uhr/digitaluhr.swf" /> <param
 name="menu" value="false" /> <param name="quality"
 value="high" /> <param name="bgcolor"
 value="#51AAFF" /> <param name="wmode"
 value="transparent" /><embed
 src="http://www.e-reveal.de/uhr/digitaluhr.swf" menu="false"
 quality="high" bgcolor="#D0E7f4" name="digitaluhr"
 type="application/x-shockwave-flash"
 pluginspage="http://www.macromedia.com/go/getflashplayer"
 align="" height="25" width="75"></object><!-- Flash-Uhr Ende--><div
 id="path"> Du bist hier:
Home

wo isn bei dir middle?

Habe ich entfernt, daran kann das aber nicht liegen.

threadi · 6 Januar 2008

Jetz steht dort "width: 0px;" - ist auch falsch. Schreib lieber "width: 100%;".

voda · 6 Januar 2008

TAUSENDDANK!!!!!;Jump

Mit % wäre ich niemals drauf gekommen!!

Bild einfügen und Position bestimmen?

cult7

Neues Mitglied

nichtsgeht

Neues Mitglied

voda

Neues Mitglied

voda

Neues Mitglied

threadi

Moderator

voda

Neues Mitglied

threadi

Moderator

Gelöschtes Mitglied 3007

Guest

voda

Neues Mitglied

threadi

Moderator

voda

Neues Mitglied

Neueste Beiträge