# Bilder mit Unterschrift nebeneinander



## mennepaul (30. August 2007)

Hallo,
ich habe mehere Bilder nebeneinander, jedes Bild mit Unterschrift in ein eigendes Div_links mit fester Breite, gesetzt. Nur leider sieht es nicht so aus wie es soll. Normaler Weise sind immer 4 Stück nebeneinander. Bei mir zu Hause klappt das auch im Firefox und IE 7. Nur leider in der Firma hab iich gesehen, das nur noch 3 nebeneinander sind.

Woran kann das liegen?

Hier der Link
http://www.djk-gruen-weiss-menden.de/jugend/b1/spielerportraits.htm

Oder kann man das auch anders lösen. Bitte keine Tabelle.

Kann die Css Dateien leider nicht zeigen, da ich von der Firma aus nicht herankomme.

Danke und Gruß
Menne


----------



## Maik (30. August 2007)

Hi,

mit den folgenden Regelerweiterungen sollten die Bilder auch im IE vierspaltig angeordnet werden:


```
#content {
        background-color: #ffffff;
        padding: 0;
        margin: 0 150px !important;
        margin: 0 147px;
        height:600px;
        overflow:auto;
}

#left {
        float: left;
        width: 150px;
        margin-right: 0 !important;
        margin-right: -3px;
        padding: 0px;
}

#right {
        float: right;
        width: 150px;
        margin-left: 0 !important;
        margin-left: -3px;
        padding: 0;
}
```
Zudem muss eine ID in einem Dokument eindeutig sein und darf darin nicht mehrmals vergeben werden. 

Aus diesem Grund muss die ID *#links-bild* in die Klasse *.links-bild* umgewandelt werden:


```
/* aus */
#links-bild {
        float: left;
        width: 145px;
        padding-top: 0px;
        padding-right: 0px;
        text-align: center;
        left: 1px;
}

/* wird */
.links-bild {
        float: left;
        width: 145px;
        padding-top: 0px;
        padding-right: 0px;
        text-align: center;
        left: 1px;
}
```


```
<!-- aus -->
<div id="links-bild">
  <p><img src="bilder/gianluca_savino_diaz.jpg" width="85" height="110" /></p>
  <p>Gianluca S. Diaz</p>
</div>

<!-- wird -->
<div class="links-bild">
  <p><img src="bilder/gianluca_savino_diaz.jpg" width="85" height="110" /></p>
  <p>Gianluca S. Diaz</p>
</div>
```


----------



## mennepaul (30. August 2007)

Hallo,
danke erstmal für Deine schnelle Antwort.

Mit der Regelerweiterungen für den IE komm ich garnicht klar. Damit habe ich im Firefox nur 2 Bilder nebeneinander.

Habe deshalb nur die ID #links-bild in die Klasse .links-bild umgewandelt.

Jetzt sind auch 4 Bilder nebeneinander im Firefox und IE zu sehen. Weiß nur nicht wie es in der Firma aussieht. Werde ich Morgen erst sehen.

Hier mal meine CSS-Datei

```
body {
	background-color: #FFFFFF;
	font-size: 12px;
	font-family: Verdana;
	color:#000000;
	padding:0;
	margin:0;
}
a {color: #006600;}

h1 {
	font-size: 16px;
	background-color: #FFFFFF;
	padding:5px 15px;
	margin:0;
	text-align: center;
}

h2 {
font-size:12px;
font-weight: bold;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 900px;
margin-bottom: 10px;
margin:0 auto;
background-color: #FFFFFF;
}

/* ----------banner for logo-------------- */
#banner {
background-color: #FFFFFF;
text-align: center;
padding: 0px;
margin: 0px;
}
#banner img {padding:5px 0px;} 

/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0;
/* margin: 0 200px; */}
div#content { 
height:600px;
overflow:auto;
}

p, pre{
padding: 5px 10px;
margin:0;
}

/* --------------left navigavtion------------- */
#left {
	float: left;
	width: 150px;
	margin: 0px;
	padding: 0px;
}
#right {
	float: right;
	width: 150px;
	margin: 0;
	padding: 0;
}
/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: center; }

/* -----------hoirzontal Navi--------------------------- */

.bevelmenu{
	margin: 0;
	width: auto;
	background-color: #FFFFFF;
	text-align: center; /*set value to "right" for example to align menu to the right of page*/
	font-family: Verdana;
	font-size: 12px;
	font-weight: bold;
	padding-top: 6px;
	padding-right: 0;
	padding-bottom: 6px;
	padding-left: 0;
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
color: #FFFFFF;
background-color: #006600;
}

.bevelmenu li a:hover{
	color: #FFFFFF;
	background-color: #FFFFFF;
	background-image: url(../bilder/back.gif);
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
}

/* -----------vertikales Navi--------------------------- */
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 140px;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#FFFFFF; /*light dark dark light*/
background-color: #006600;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
	color: #FFFFFF;
	background-image: url(../bilder/back.gif);
}

/*Grundlegene Elemente zur Positionierung von Bildern im Text mit nötigen Abständen zum Text*/
.img-left {
	float:left;
	margin-right:0.5em;
	margin-bottom: 0.25em;
}
.img-right {
	float:right;
	margin-left:0.5em;
	margin-bottom: 0.25em;
}
.clear {
	clear:left;
}

#links {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 250px;
}
#rechts {
	float: right;
	margin: 0;
	padding: 0;
	width: 250px;
}

.links-bild {
        float: left;
        width: 145px;
        padding-top: 0px;
        padding-right: 0px;
        text-align: center;
        left: 1px;
}
```

Gruß
Menne


----------



## Maik (30. August 2007)

mennepaul hat gesagt.:


> Mit der Regelerweiterungen für den IE komm ich garnicht klar. Damit habe ich im Firefox nur 2 Bilder nebeneinander.


Sorry, mein Fehler :-(

Nimm mal stattdessen diesen Code für das DIV *#content*:


```
#content {
background-color: #ffffff;
padding: 0;
margin: 0 !important;
margin: 0 147px;
height:600px;
overflow:auto;
}
```


----------



## mennepaul (30. August 2007)

Verstehe ich jetzt nicht ganz.

Dann habe ich ja 2mal #content. Oder verstehe ich das jetzt falsch?

Wäre nett wenn Du  die geänderte CSS komplett Posten könntest.

Danke
Menne


----------



## Maik (30. August 2007)

Selbstverständlich muss im Stylesheet der Selektor *#content* ausgetauscht bzw. die vorgeschlagenen Erweiterungen im vorhandenen aufgenommen werden - aus diesem Grund hatte ich sie heute Mittag ja auch *fett* markiert.

Damit wir hier zu Potte kommen, poste ich dir auch gerne den vollständigen CSS-Code:


```
body {
        background-color: #FFFFFF;
        font-size: 12px;
        font-family: Verdana;
        color:#000000;
        padding:0;
        margin:0;
}
a {color: #006600;}

h1 {
        font-size: 16px;
        background-color: #FFFFFF;
        padding:5px 15px;
        margin:0;
        text-align: center;
}

h2 {
font-size:12px;
font-weight: bold;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 900px;
margin-bottom: 10px;
margin:0 auto;
background-color: #FFFFFF;
}

/* ----------banner for logo-------------- */
#banner {
background-color: #FFFFFF;
text-align: center;
padding: 0px;
margin: 0px;
}
#banner img {padding:5px 0px;}

/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0;
margin: 0 !important;
margin: 0 147px;
height:600px;
overflow:auto;
}

p, pre{
padding: 5px 10px;
margin:0;
}

/* --------------left navigavtion------------- */
#left {
        float: left;
        width: 150px;
        margin-right: 0px !important;
        margin-right:-3px;
        padding: 0px;
}
#right {
        float: right;
        width: 150px;
        margin-left: 0 !important;
        margin-left:-3px;
        padding: 0;
}
/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: center; }

/* -----------hoirzontal Navi--------------------------- */

.bevelmenu{
        margin: 0;
        width: auto;
        background-color: #FFFFFF;
        text-align: center; /*set value to "right" for example to align menu to the right of page*/
        font-family: Verdana;
        font-size: 12px;
        font-weight: bold;
        padding-top: 6px;
        padding-right: 0;
        padding-bottom: 6px;
        padding-left: 0;
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
color: #FFFFFF;
background-color: #006600;
}

.bevelmenu li a:hover{
        color: #FFFFFF;
        background-color: #FFFFFF;
        background-image: url(../bilder/back.gif);
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
}

/* -----------vertikales Navi--------------------------- */
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 140px;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#FFFFFF; /*light dark dark light*/
background-color: #006600;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
        color: #FFFFFF;
        background-image: url(../bilder/back.gif);
}

/*Grundlegene Elemente zur Positionierung von Bildern im Text mit nötigen Abständen zum Text*/
.img-left {
        float:left;
        margin-right:0.5em;
        margin-bottom: 0.25em;
}
.img-right {
        float:right;
        margin-left:0.5em;
        margin-bottom: 0.25em;
}
.clear {
        clear:left;
}

#links {
        float: left;
        margin: 0px;
        padding: 0px;
        width: 250px;
}
#rechts {
        float: right;
        margin: 0;
        padding: 0;
        width: 250px;
}

.links-bild {
        float: left;
        width: 145px;
        padding-top: 0px;
        padding-right: 0px;
        text-align: center;
        left: 1px;
}
```


----------



## mennepaul (30. August 2007)

Danke Dir. Hast ja noch was anderes geändert. Das "#left" und das "#right". Aber ich schätze mal das muß dann so sein.

Habe es mal online gestellt. Morgen mal schauen wie es in der Firma aussieht.

Gruß
Menne


----------



## Maik (31. August 2007)

mennepaul hat gesagt.:


> Morgen mal schauen wie es in der Firma aussieht.


Firma = IE6?


----------



## mennepaul (31. August 2007)

Ja ist 6.0.

Sieht aber gut aus. Siehe Bild(Screenshot aus der Firma).

Danke Dir.

Gruß
Menne


----------

