mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:56 Benutzername: Passwort: Auto-Login

Thema: Bild verschiebt Layout (html, css) vom 20.03.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bild verschiebt Layout (html, css)
Seite: 1, 2  Weiter
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)

Antworten mit Zitat Zum Seitenanfang

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!
  View user's profile Private Nachricht senden
tschuingum

Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
Verfasst Sa 20.03.2010 12:53
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
katzenfreundin
Threadersteller

Dabei seit: 28.02.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst So 28.03.2010 13:13
Titel

Die Site

Antworten mit Zitat Zum Seitenanfang

Hi Lächel.
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
  View user's profile Private Nachricht senden
mokleini

Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: Männlich
Verfasst So 28.03.2010 13:59
Titel

Antworten mit Zitat Zum Seitenanfang

bei mir kommt bei service ein srollbalken dazu.

kein wunder also, dass dein layout nach links rutscht...
  View user's profile Private Nachricht senden
katzenfreundin
Threadersteller

Dabei seit: 28.02.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 30.03.2010 11:53
Titel

Hmmm

Antworten mit Zitat Zum Seitenanfang

Aber das Layout verschiebt sich nicht um Scrollbalken-Breite sondern nur ca. 10 px.....
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Di 30.03.2010 12:51
Titel

Antworten mit Zitat Zum Seitenanfang

Also etwa um die halbe Scrollbalkenbreite?

Denk daran, dass dein Layout zentriert ist. Also verteilt sich Verringerung der Breite auf beide Seiten. *zwinker*
  View user's profile Private Nachricht senden
nel

Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Di 30.03.2010 13:44
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
denise2302

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 31.03.2010 12:05
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.