Bilder mit Unterschrift nebeneinander

Status
Nicht offen für weitere Antworten.
M

mennepaul

Mitglied
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
 
Hi,

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

Code: 
#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:

Code: 
/* 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;
}
Code: 
<!-- 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>
 
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
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 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
 
mennepaul hat gesagt.:
Mit der Regelerweiterungen für den IE komm ich garnicht klar. Damit habe ich im Firefox nur 2 Bilder nebeneinander.
Zum Vergrößern anklicken....
Sorry, mein Fehler :-(

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

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

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
 
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:

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;
}
 
:)

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
 
Ja ist 6.0.

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

Danke Dir.

Gruß
Menne
 

Anhänge

  • 1.jpg
    1.jpg
    99,3 KB · Aufrufe: 32
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück