[HTML] Width: 100% -745px;

Gehe zu Seite:

Geschlossen

So. 07.03.2010 18:59 Uhr #1

MaddinXx Mitglied

Registriert seit
15.02.2007

Beiträge
787

Beitragswertungen
Hey zusammen,

Bin gerade mit der Anpassung des Themes beschäftigt und bleibe an einen Punkt verzweifelt stehen. Habe bereits zahlreiche Foren durchschaut und keine brauchbare bzw. funktionierende Lösung gefunden.

Das Problem ist folgendes:

Ich habe einen DIV der 96% der width verwendet. In diesem DIV 2 weitere DIVs, der eine 700px breit, der andere soll den Rest füllen.

Also: 96% - 700px - 35px (Abstand DIV zu DIV) = Breite des DIVs

In Dreamweaver wird es richtig angezeigt, nicht aber im Browser.

Der besagte DIV hat width: auto. Mache ich width: 10% funkioniert es (ist aber nicht das Ziel).

Hier mal die Dateien:
```

<div id="content">
  
  
  <div id="slider">
  </div>
  
  <div id="inhalt">
  </div>
  <div style="clear: both;"></div>
  
</div>
```
&
```
/* Content */
#content {
width: 96%;
height: 100%;
margin-left: 2%;
margin-right: 2%;
margin-top: 20px;
margin-bottom: 20px;
}

#slider {
width: 700px;
float: left;
}

#inhalt {
width: 100% -735px;
float: left;
margin-left: 35px;
}
/* Content Ende */
```
Freundliche Grüsse

betroffene Homepage: preview.web-area.ch/wa/
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 07.03.2010 19:16 Uhr #2

Mairu Coder

Registriert seit
16.06.2006

Beiträge
15.334

Beitragswertungen

Ich glaube mit % kann man (leider) nicht vernünftig arbeiten.

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 07.03.2010 21:39 Uhr #3

MaddinXx Mitglied

Registriert seit
15.02.2007

Beiträge
787

Beitragswertungen

Zitat geschrieben von Mairu

Ich glaube mit % kann man (leider) nicht vernünftig arbeiten.

Oke schade
0 Mitglieder finden den Beitrag gut.
- zitieren

Mi. 17.03.2010 10:17 Uhr #4

fivthy Mitglied

#width: 100% -735px;

Funktioniert so nicht, in CSS kann man erst ab CSS3 rechnen, da geht es dann aber so:

#width: calc(100% - 735px);

Leider kann das noch kein Browser.

Probiers mal hiermit:

<!-- Content -->
<div id="content">
  <div style="display:table-row;">
    <!-- Content Management -->
    <!-- Slider -->
    <div id="slider">
    </div>
    <!-- Inhalt -->
    <div id="inhalt">
    </div>
    <!-- Content Management Ende -->
  </div>
</div>

und

/* Content */
#content {
width: 96%;
height: 100%;
margin-left: 2%;
margin-right: 2%;
margin-top: 20px;
margin-bottom: 20px;
display: table;
}
 
#slider {
width: 700px;
float: left;
display: table-cell;
}
 
#inhalt {
display: table-cell;
float: left;
margin-left: 35px;
}
/* Content Ende */

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 18.03.2010 13:44 Uhr #5

annemarie gelöschter User
Zitat geschrieben von Mairu
Ich glaube mit % kann man (leider) nicht vernünftig arbeiten

mit % kann man nicht vernünftig arbeiten!

width:auto; ist immer 100% und orientiert sich am elternelement.

und ein "X% - Xpx" wird dir kein browser vernünftig rendern!

die design vorschau von DreamWeaver ist lediglich eine annäherung, zumal die verschiedenen Browser auch verschiedene engines zur Darstellung verwenden und immer eine abweichung von der referenz stattfindet.

(z.b.:
chrome/safari - webkit
IE - IEengine
Outlook - MS Word Engine )
```
/* Content */
#content {
width: 96%;
height: 100%;
margin-left: 2%;
margin-right: 2%;
margin-top: 20px;
margin-bottom: 20px;
display: table;
}
```
```
/* Content */
#content {
margin:20px 15px;
display: table;
}
```
auch die height:100% angabe bringt dir nichts, da sich height durch die beeinhalteten elemente definiert.
google hierzu einmal nach "css faux columns", in einem der zahlreichen tutorials wird dir das verhalten dazu und wie man eine annäherung an "height:100%" bekommt bestimmt erklärt.

du solltest dir bei deinem Design generell überlegen wie breit es seien sollte, 2% sind eine menge pixel differenz wenn man die seite auf einem 17" und einem 42" monitor betrachtet!

MfG annemarie

Zuletzt modifiziert von annemarie am 18.03.2010 - 13:44:27
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » [HTML] Width: 100% -745px;