Unterschiedliche Breiten im Content

Hallo zämä
Ich bin neu hier aber pröble schon einige Zeit mit Joomla herum.

Ich erstelle mir für meine Firma einen neuen Webauftritt.
Nun hab ich folgendes Problem:

Das Template ist zweispaltig, links die Navigation rechts der Content.
Im Content habe ich Text und Bilder eingefügt.
Der Text soll ein padding-right: 40px haben.
Das Bild soll die gesamte Contentbreite einnehmen und dazu padding-right: 0px haben.
Wenn ich nur den Text einfüge klappt das mit dem padding.
Sobald ich allerdings das Bild einfüge, dass über die gesamte Breite geht, geht der Text auch bis zum rechten Rand.
Nun weiss ich nicht wie ich die unterschiedlichen Breiten bewerkstelligen soll.

Ich hoffe jemand kann mir helfen und bedanke mich dafür.

Freundliche Grüsse
mobili4u

Hi und willkommen im Board.

So ganz ohne Link zur Problemseite ist das ein bisschen schwierig... Vermutlich fehlen nur die passenden CSS-Einträge.

Hallo Jimbo
Ja das ist wahrscheinlich schwierig, aber ich habe das ganze auf localhost und noch nicht beim Hoster.
Vielleicht hilft dir beigefügtes Bild und den CSS Code. Der Text soll rechts beim Logo aufhören, das Bild soll aber bis ganz nach aussen. ich hoffe du kannst was damit anfangen und danke dir für dein Feedback.
Gruss mobili4u

html {min-height: 100%
}
* {
padding:0;
margin:0;
}
body {
font-family: Verdana, Geneva, sans-serif;
text-align: left;
font-size: 12px;
background: #333;
}
p {
padding-bottom: 15px;
}
#container {
width: 900px;
height: 100%;
}
#header {
width: 100%;
background-image: url(../images/header_img.jpg);
height: 100px;
}
#mitte {
background-color: #FFF;
float: left;
background-image: url(../images/bg_container.jpg);
background-repeat: repeat-y;
}
#left {
float: left;
width: 160px;
height: 100%;
margin-left: 140px;
}
#content {
width: 600px;
float: left;
height: 100%;
}
#footer {
width: 100%;
background-image: url(../images/footer_img.jpg);
height: 60px;
float:left;
}
.contentheading {
font-size: 12px;
font-weight: bold;
padding-bottom: 10px;
}
a:link, a:visited, a:active{
color: #999;
text-transform: uppercase;
text-decoration: none;
font-weight: normal;
}
a:hover {
color: #000;
font-weight: bold;
text-transform: uppercase;
}
#left ul li {
display:list-item;
list-style-type: none;
padding-bottom: 8px;
}
#left ul {
display:list-item;
list-style-type: none;
margin-bottom: 20px;
}

mobili4you schrieb: ... Ja das ist wahrscheinlich schwierig, aber ich habe das ganze auf localhost und noch nicht beim Hoster. ...

Ja dann ist das leider nichts, da lässt sich nicht erkennen welcher Code ausgegeben wird und welche Klasse wo angewendet wird, das geht ausschliesslich auf der Live-Seite...

Mein Tipp: Firefox mit der Erweiterung Firebug. So kannst du untersuchen, welcher Code ausgegeben wird.

Also ich hab das was ich bis jetzt habe mal auf den Server geschaufelt.

--ALTER LINK WURDE ENTFERNT--

Gib dem <p> in der CSS folgende Auszeichnung: ...und dann ist es absolut zwingend, dass das Bild nicht innerhalb eines <p> liegt, dann passt's.

Anmerkung: Mit den ineinander verschachtelten Tabellen wirst Du wohl noch weitere Probleme bekommen, ganz davon abgesehen, dass für Leute die einen Screenreader nutzen (z.B. sehbehinderte Menschen) die Seite absolut unzugänglich sein dürfte.