| Autor |
Nachricht |
katzenfreundin
Threadersteller
Dabei seit: 28.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 20.03.2010 12:26
Titel Bild verschiebt Layout (html, css) |
  |
|
Hi Leute,
habe folgendes Problem:
Ein zweispaltiges Layout (left, right) funktioniert super, solange ich keine Bilder in den Inhaltsdiv (left) einpflege. Sobald das Bild drin ist, verschiebt sich alles um ca. 10px nach links bzw wird um 10px breiter? Auf der linken Seite sieht man dann einen dünnen Streifen (der gehört zum Hintergrundbild das sich nach unten hin wiederholt (im body). Kann mir jemand helfen?
Hier mein css:
| Code: |
body {
background-color: #fee6c2;
font-size: 0.8em;
font-family:Arial, Sans-Serif;
color:#564b47;
padding:0;
margin:0;
background-image:url(Bilder/Layoutbilder/hintergrundstreifen.jpg);
background-position: top center;
background-repeat: repeat-y;
}
a {color: #fff; text-decoration:none;}
a:visited {color:#fff; text-decoration:none;}
a:hover {color: #ccc; text-decoration:none;}
a:active { color:#ccc; text-decoration:none;}
/* ----------container zentriert das layout-------------- */
#container {
width: 853px;
margin: 0 auto;
padding: 0;
xborder: 1px solid red;
}
/* --------------left and right------------- */
#left {
float: left;
width: 305px;
height:470px;
margin: 0;
padding:0;
color:#ffffff;
background-image:url(Bilder/Layoutbilder/Startbild.jpg);
background-position: top left;
background-repeat: no-repeat;
}
#right {
float: right;
width: 118px;
margin: 0;
padding: 0;
color:#00ffff;
background:url(Bilder/Layoutbilder/Kurve_rechts.jpg) right top no-repeat;
}
/* Menü */
#navigation {
margin:0;
padding:0;
float:right;
margin-top:120px;
width:100%;
}
.navifeld{
margin:0;
margin-top:5px;
padding:0;
padding-top:5px;
height:25px;
font-size:1.1em;
letter-spacing:0.06em;
font-weight:bold;
}
/* ----------banner for logo-------------- */
#header {
margin: 0;
padding: 0;
width:853px;
height:148px;
}
/* -----------------Inhalt allgemein--------------------- */
#content_sub {
width:680px;
}
#content_sub .text {
width:90%;
float:right;
}
#content_sub h1 {
margin:0;
color:#06738a;
font-size:1.7em;
letter-spacing:0.05em;
font-weight:bold;
}
#content_sub h2 {
margin:0;
color:#06738a;
font-weight:lighter;
font-size:1.4em;
letter-spacing:0.05em;
}
#content_sub p {
margin:0;
color:#5f372f;
font-size:1.2em;
line-height:1.3em;
}
#content_sub img .contentimage {
margin-left: -10px;
padding: 0;
}
ul {
margin-left:78px;
margin-top:0;
margin-bottom: 30px;
font-size:1.2em;
}
li {
margin-top:10px;
color:#5f372f;
font-size:1em;
list-style-type:none;
list-style-image:url(Bilder/Layoutbilder/spiegelstrich.gif);
list-style-position:outside;
}
#mecky_sagt {
background-color:#d0c7c2;
font-size: 1em;
border-left: 14px solid #895a4a;
background-image:url(Bilder/Inhaltbilder/Signatur_Mecky_baige.jpg);
background-position:bottom right;
background-repeat:no-repeat;
width:70%;
}
#mecky_sagt p {
margin-top:10px;
padding:20px;}
/* -----------footer--------------------------- */
#footer {
clear: both;
padding: 0;
margin: 0px 118px 0px 0px;
width:100%;
background-image:url(Bilder/Layoutbilder/pfoten.jpg);
background-position: bottom right;
background-repeat: no-repeat;
height:70px;
}
#footer p{ margin:0px 10px 10px 30px;
padding-bottom:20px;
padding-top:20px;
color:#7c2d12;
font-size:1.3em;
line-height:1.4em;
}
/* ------------------------------------------------------------------------------ie 6--------------------------- */
*html #left {
margin-right:-3px;
}
*html #right {
margin-left:-3px;
}
*html #content {
width:425px;
}
|
Und hier mein html
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="styles.css" rel="stylesheet" media="screen" />
<title>Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="
background-image:url(Bilder/Layoutbilder/hintergrundstreifen_sub.jpg);
background-position: top center;
background-repeat: repeat-y;">
<div id="container">
<div id="header" ><img src="Bilder/Layoutbilder/header.jpg" width="853" height="148" /> </div>
<div id="right">
<div id="navigation">
<div style="background-color:#19525e" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="index.html" title="Startseite" target="_self">Home</a> </div>
<div style="background-color:#06738a" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="service.html" title="Service" target="_top">Service</a> </div>
<p><img src="Bilder/Layoutbilder/spacer.gif" width="20" height="5" align="left"/><a href="preise.html">Preise</a></p>
<p><img src="Bilder/Layoutbilder/spacer.gif" width="20" height="5" align="left"/><a href="gassi_gehen.html">Gassi gehen</a></p>
<div style="background-color:#58bdeb" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="x" title="" target="_blank">Kontakt</a> </div>
<div style="background-color:#67a0be" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="x" title="" target="_blank">Pflegetiere</a> </div>
<div style="background-color:#8a9ed0" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="x" title="" target="_blank">Meine Tiere</a> </div>
<div style="background-color:#dca435" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="x" title="" target="_blank">Fotografie</a> </div>
<div style="background-color:#d48633" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="x" title="" target="_blank">Aktuelles</a> </div>
<div style="background-color:#da5324" class="navifeld"><img src="Bilder/Layoutbilder/spacer.gif" width="5" height="5" align="left"/><a href="x" title="" target="_blank">Emotionen</a> </div>
</div>
</div>
<div id="content_sub">
<a href="index.html"><img src="Bilder/Layoutbilder/Logo_Schriftzug_sub.jpg" alt="zurück zur Startseite" border="0" style= "margin: 0px;"/></a>
<div class="text"><img src="Bilder/Inhaltbilder/Bild.jpg" width="250px" height="356px" align="left" /><h1>Service</h1>
<h2> Überschrift zwei</h2>
<p>I-laehnl-egnk-aej ljnwl-tfawe</p>
<p> I-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfawe</p></div>
<div class="text"> <p>
I-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfaweI-laehnl-egnk-aej ljnwl-tfawe</p>
<div id="mecky_sagt">
<p>I-laehnl-egnk-aej ljnwl-tfawe</p>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
|
Danke!
|
|
| |
  |
 |
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Sa 20.03.2010 12:53
Titel
|
|
|
Hallo,
a. Ich kann kein id="left" finden - überseh ich es oder fehlt es?
b. Kannst du das Beispiel mal online stellen, dann wirds einfacher zu helfen.
c. Miste den Code aus - alles was mit Layout zu tun hat aus der html raus und in die css rein; dann noch etwas Semantik reinbringen und schon wird alles einfacher.
Frohes Schaffen
Jan
|
|
| |
 |
|
|
Anzeige
|
|
|
katzenfreundin
Threadersteller
Dabei seit: 28.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 28.03.2010 13:13
Titel Die Site |
|
|
Hi  .
Musste erstmal die Originalseite etwas umbauen (Namen raus und so weiter und Hintergründe einfärben). Die Originalseite soll so ja erstmal noch nicht sichtbar sein.
Aber denke so kann man mein Problem sehen.
Wenn man von diesem Link aus zur Seite "Service" wechselt, rutscht das Layout nach links.
Ich kann nicht finden woran es liegt.
Link: index
Könnt ihr mir helfen?
Der html code und auch der css code haben sich minimal verändert, so dass ihr am besten in den Quelltext des Browsers schaut und nicht auf den oben gezeigten.
Ich werde später auch brav noch die styles aus der html nehmen *g*.
Danke im Voraus
(Das div "left" gibts nur auf der Startseite. Es ist nur für ein Hintergrundbild gedacht, welches per css übergeben wird. Das Bild ist eine Art "Bild des Monats", welches immer mal wieder aktualisiert werden soll. Es liegt übrigens im Hintergrund, da darüber noch ein kleines Zusatzbild liegen soll.)
Zuletzt bearbeitet von katzenfreundin am So 28.03.2010 13:20, insgesamt 3-mal bearbeitet
|
|
| |
|
|
mokleini
Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: 
|
Verfasst So 28.03.2010 13:59
Titel
|
|
|
bei mir kommt bei service ein srollbalken dazu.
kein wunder also, dass dein layout nach links rutscht...
|
|
| |
|
|
katzenfreundin
Threadersteller
Dabei seit: 28.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 30.03.2010 11:53
Titel Hmmm |
|
|
|
Aber das Layout verschiebt sich nicht um Scrollbalken-Breite sondern nur ca. 10 px.....
|
|
| |
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: im Netz vom Hirsch
Alter: 51
Geschlecht:
|
Verfasst Di 30.03.2010 12:51
Titel
|
|
|
Also etwa um die halbe Scrollbalkenbreite?
Denk daran, dass dein Layout zentriert ist. Also verteilt sich Verringerung der Breite auf beide Seiten. 
|
|
| |
|
|
nel
Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Di 30.03.2010 13:44
Titel
|
|
|
das springen der seite kannst du nur verhindern indem du ihr bydefault schon einen scrollbalken gibst, auch wenn keiner von nöten wäre
finde ich aber nicht störend, ist ja "logisch" das die seite springt, sieht man also nicht selten
|
|
| |
|
|
denise2302
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 33
Geschlecht: 
|
Verfasst Mi 31.03.2010 12:05
Titel
|
|
|
|
im ie ist eh immer ein scrollbalken da. im ff gibt es overflow: -moz-scrollbars-vertical- damit hast du einen inaktiven scrollbalken. finde ich persönlich hübscher als wenn die seite springt
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Layout verschiebt sich beim skalieren des Browers
CSS Layout - Problem - Div verschiebt sich bei längerem Text
HTML Tabelle - verschiebt sich im Firefox
HTML/JS Multimedia LAyout?
[html/css]multicolumn-layout
HTML - rundes Layout
|
|
Willkommen auf dem Portal für Mediengestalter
