ilch Forum » Ilch Clan 1.1 » Allgemein » Bilder nebeneinander

Geschlossen
  1. Mi. 30.09.2009 17:13 Uhr #1
    User Pic
    Loqi-X Mitglied
    Registriert seit
    13.10.2008
    Beiträge
    439
    Beitragswertungen
    1 Beitragspunkte
    Hey,

    Ich wollte euch mal fragen, ob ihr mir mit meinen 2 Boxen helfen könnt.

    Die 2 Boxen sind für die Sponsoren und die Partner da.
    Ich habe 10 Logos erstellt, 5 für "SPONSORS" und 5 für "PARTNERS".
    Ich will diese Logos nebeneinander angezeigt haben. Ich weiß das es sich ausgeht, denn als die Logos auf einem Bild waren, ging es sich auch aus.
    Irgendeine Tabellen-Größe ist falsch, so entshet ein Zeilenumbruch und das letzte Logo wandert in die nächste Zeile.

    style.css: 
    body {
    background: url(img/pc_bg.png);
    margin: 0px;
    font: 12px Arial, Helvetica, sans-serif;
}

#pcdesign {
    width: 1061px;
    margin: 0px auto;
	overflow: hidden;
}

#pcheader {
    background: url(img/pc_header.png);
    width: 1061px;
    height: 174px;
}

/* Content - grob */
#pccontent {
    width: 1049px;
    margin: 0px 6px;
    position: relative;
}

#pccontent_header {
    width: 1049px;
    height: 14px;
    background: url(img/pc_content_oben.png);
    margin: 0px;
    position: relative;
}

#pccontent_body {
    width: 1036px;
    background: url(img/pc_content.png) repeat-y;
    position: relative;
    left: 2px;
    padding: 0px 5px 0px 8px;
}

#pccontent_footer {
    width: 1049px;
    height: 87px;
    background: url(img/pc_footer.png);
    margin: 0px;
    position: relative;
    left: 1px;
}

/* Loginbox */
#box_login {
    width: 253px;
    height: 134px;
    position: relative;
    left: 755px;
    top: 9px;
}

#box_login .inputs {
    top: 30px;
    left: 12px;
    position: relative;
    width: 235px;
}

#box_login .inputs input {
    width: 175px;
    height: 23px;
    border: 0px;
    padding: 6px 0 0 5px;
    float: left;
    color: white;
}

#box_login .inputs input.name {
    background: url(img/pc_balken_name.png);
}

#box_login .inputs input.name2 {
    background: url(img/pc_balken_name2.png);
}

#box_login .inputs input.password {
    background: url(img/pc_balken_pw.png);
}

#box_login .inputs input.password2 {
    background: url(img/pc_balken_pw2.png);
}

#box_login .inputs .submit {
    background: url(img/pc_button_login.png);
    width: 47px;
    height: 20px;
    border: 0px;
    padding: 0px;
    margin-top: 20px;
    float: right;
}

#box_login .buttons {
    position: relative;
    top: 40px;
    left: 12px;
}

#box_login .buttons a {
    margin-right: 10px;
}

#box_login .infos {
    margin-left: 15px;
    width: 105px;
    color: white;
    float: left;
}

#box_login .infos a {
    color: #359AE3;
}

#box_login .avatar {
    width: 120px;
    margin-left: 10px;
    float: left;
    text-align: center;
}

#box_login .avatar img {
    border: 1px solid white;
    padding: 2px;
}

#box_login .head {
    float: left;
    width: 235px;
}

/* Statistik Box */
#pc_box_stat {
    height: 29px;
    width: 1037px;
    margin-top: 10px;
    margin-left: 3px;
}

#pc_box_stat * {
    float: left;
    margin: 0px;
}

#pc_box_stat_text {
    background: url(img/pc_stat_text.png);
    width: 641px;
    height: 29px;
    color: white;
    font-weight: bold;
	position: relative;
}

#pc_box_stat_text table {
	position: relative;
	top: 8px;
	left: 105px;
}

#pc_box_stat_verlauf {
    background: url(img/pc_stat_verlauf.png);
    width: 150px;
    height: 29px;
}

#pc_box_stat_end {
    width: 224px;
    height: 29px;
}

/* Topboxen */
#pcc_topboxes {
    width: 1030px;
    margin-left: 6px;
}

#pcc_topboxes .sponsors {
    float: left;
    width: 500px;
}

#pcc_topboxes .partners {
    float: left;
    width: 500px;
}

/* Navi */
#pcc_navi {
    width: 1036px;
}

#pcc_navi a {
    float: left;
}

/* content */
#pcc_middle {
    clear: both;
}

#pccm_left {
    width: 812px;
    float: left;
}

#pccml_top {
    width: 812px;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

#pcc_hmenu {
    float: left;
    width: 600px;
    margin-top: 7px;
}

/* Suchbox */
#pcc_box_search {
    width: 205px;
    float: right;
}

#pcc_box_search input.text {
    background: url(img/pc_balken_search.png);
    float: left;
    width: 166px;
    height: 19px;
    border: 0px;
    padding: 5px 0 0 7px;
    color: black;
}

#pcc_box_search input.submit {
    background: url(img/pc_icon_search.png);
    float: right;
    border: 0px;
    width: 27px;
    height: 26px;
}

#pccml_body {
    margin-top: 5px;
}

/* Boxen rechts */
#pccm_right {
    color: #737373;
    width: 212px;
    float: right;
}

.pccmr_box_cont {
    width: 185px;
    padding-left: 5px;
}

/* Footer */
#pccontent_footer .links {
    position: relative;
    left: 890px;
    top: 12px;
}

#pccontent_footer .contact {
    display: block;
    width: 46px;
    height: 15px;
    float: left;
}

#pccontent_footer .imprint {
    display: block;
    width: 65px;
    height: 15px;
    float: left;
    margin-left: 12px;
}

div.clear {
    clear: both;
}

/* Anpassungen */
a {
    color: #005BB7;
}

/* ilch Klassen */
.border {
    background-color: #185685;
}

.Chead {
    background: #16639b;
    color: #9dbdd4;
}

.Chead a {
    color: #9dbdd4;
}

.Chead td, .Chead td strong, .Chead h4, .Chead td b {
    background: #16639b;
    color: #9dbdd4;
}

.Callg {
    background-color: #EFEFEF;
    color: #000000;
}

.Callg td {
    color: #000000;
}

.Cnorm {
    background-color: #e5e5e5;
}

.Cmite {
    background-color: #B4C6D8;
}

.Cdark {
    background-color: #9AB1C8;
}

.rand {
    border: solid #185685 1px;
}

.smalfont {
    font-size: 10px;
    text-decoration: none;
}





    index.htm: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<title>{TITLE}</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="include/designs/PC-Design/style.css" />
</style>
<!--[if lte IE 6]>
    <style type="text/css">
	#pccontent_header { position: relative; top: 1px; }
	#box_login .avatar { width: 100px; }
	</style>
<![endif]-->
</head>
<body>
<div id="pcdesign">
	<div id="pcheader">
		<div id="box_login">{_boxes_pclogin}</div>
	</div>
	<div id="pccontent">
		<div id="pc_box_stat">
			<img src="include/designs/PC-Design/img/pc_stat_start.png" width="22" height="29" border="0" />
			<div id="pc_box_stat_text">{_boxes_pconline}</div>
			<div id="pc_box_stat_verlauf"></div>
			<img id="pc_box_stat_end" src="include/designs/PC-Design/img/pc_stat_end.png" />
		</div>

		<div id="pccontent_header"></div>
		<div id="pccontent_body">
			<div id="pcc_topboxes">
				<div class="sponsors">
					<img src="include/designs/PC-Design/img/pc_box_sponsors.png" alt="sponsors" width="68" height="13"/><br />
					<img src="include/designs/PC-Design/img/sponsors_1.png" alt="sponsors" width="95" height="97"/>
					<img src="include/designs/PC-Design/img/sponsors_2.png" alt="sponsors" width="105" height="97"/>
					<img src="include/designs/PC-Design/img/sponsors_3.png" alt="sponsors" width="103" height="97"/>
					<img src="include/designs/PC-Design/img/sponsors_4.png" alt="sponsors" width="102" height="97"/>
					<img src="include/designs/PC-Design/img/sponsors_5.png" alt="sponsors" width="96" height="97"/>
				</div>
				<div class="partners">
					<img src="include/designs/PC-Design/img/pc_box_partners.png" alt="partners" width="68" height="13"/><br />
					<img src="include/designs/PC-Design/img/partners_1.png" alt="partners" width="95" height="97"/>
					<img src="include/designs/PC-Design/img/partners_2.png" alt="partners" width="105" height="97"/>
					<img src="include/designs/PC-Design/img/partners_3.png" alt="partners" width="103" height="97"/>
					<img src="include/designs/PC-Design/img/partners_4.png" alt="partners" width="102" height="97"/>
					<img src="include/designs/PC-Design/img/partners_5.png" alt="partners" width="96" height="97"/>

				</div>
				<div class="clear"></div>
			</div>
			<div id="pcc_navi">
				<a href="?news"><img src="include/designs/PC-Design/img/pc_navi_news.png" width="58" height="37" alt="news" border="0" /></a>
				<a href="?forum"><img src="include/designs/PC-Design/img/pc_navi_forum.png" width="66" height="37" alt="forum" border="0" /></a>
				<a href="?user"><img src="include/designs/PC-Design/img/pc_navi_user.png" width="62" height="37" alt="user" border="0" /></a>
				<a href="?teams"><img src="include/designs/PC-Design/img/pc_navi_team.png" width="62" height="37" alt="team" border="0" /></a>
				<a href="?sponsors"><img src="include/designs/PC-Design/img/pc_navi_sponsors.png" width="86" height="37" alt="sponsors" border="0" /></a>
				<a href="?gbook"><img src="include/designs/PC-Design/img/pc_navi_guestbook.png" width="92" height="37" alt="gbook" border="0" /></a>
				<a href="?downloads"><img src="include/designs/PC-Design/img/pc_navi_downloads.png" width="99" height="37" alt="downloads" border="0" /></a>
				<a href="?MatchTicker"><img src="include/designs/PC-Design/img/pc_navi_esports.png" width="80" height="37" alt="esports" border="0" /></a>
				<a href="?Events"><img src="include/designs/PC-Design/img/pc_navi_contest.png" width="79" height="37" alt="contest" border="0" /></a>
				<a href="?server"><img src="include/designs/PC-Design/img/pc_navi_server.png" width="72" height="37" alt="server" border="0" /></a>
				<a href="?tuts"><img src="include/designs/PC-Design/img/pc_navi_tutorials.png" width="85" height="37" alt="tuts" border="0" /></a>
				<a href="?FAQ"><img src="include/designs/PC-Design/img/pc_navi_faq.png" width="53" height="37" alt="faq" border="0" /></a>
				<a href="?links"><img src="include/designs/PC-Design/img/pc_navi_links.png" width="61" height="37" alt="links" border="0" /></a>
				<a href="?linkus"><img src="include/designs/PC-Design/img/pc_navi_linkus.png" width="69" height="37" alt="linkus" border="0" /></a>
			</div>
			<div id="pcc_middle">
				<div id="pccm_left">
					<div id="pccml_top">
						<div id="pcc_hmenu"><strong>&raquo;</strong> {HMENU}</div>
						<form id="pcc_box_search" method="get">
							<input class="text" type="text" value="" name="search" />
							<input class="submit" type="submit" value="" title="suchen" />
							<div class="clear"></div>
							<input type="hidden" name="in" value="2" />
						</form>
						<div class="clear"></div>
					</div>
					<div id="pccml_body">{EXPLODE}</div>
				</div>
				<div id="pccm_right">
					<!-- Boxen rechts -->
					<div class="pccmr_box">
						<img src="include/designs/PC-Design/img/pc_box_vote.png" width="199" height="28" alt="" border="0" /><br />
						<div class="pccmr_box_cont">{_boxes_vote}</div>
					</div>

					<div class="pccmr_box">
						<img src="include/designs/PC-Design/img/pc_box_topic.png" width="199" height="28" alt="" border="0" /><br />
						<div class="pccmr_box_cont">{_boxes_lastforum}</div>
					</div>

					<div class="pccmr_box">
						<img src="include/designs/PC-Design/img/pc_box_downloads.png" width="199" height="28" alt="" border="0" /><br />
						<div class="pccmr_box_cont">{_boxes_topdownloads}</div>
					</div>

					<div class="pccmr_box">
						<img src="include/designs/PC-Design/img/pc_box_tuts.png" width="199" height="28" alt="" border="0" /><br />
						<div class="pccmr_box_cont">{_boxes_tuts}</div>
					</div>

				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<div id="pccontent_footer">
		    <div class="links">
                <a href="?contact" class="contact"></a>
                <a href="?impressum" class="imprint"></a>
                <div class="clear"></div>
            </div>
        </div>
	</div>
</div>
</body>
</html>


    Ich hoffe ihr könnt mir helfen lächeln.

    Homepage: externer Link

    MfG Loqi-X


    Zuletzt modifiziert von Loqi-X am 30.09.2009 - 17:14:28
    ARANYOSDESIGNS - Optimization is creative

    0 Mitglieder finden den Beitrag gut.
  2. Mi. 30.09.2009 18:12 Uhr #2
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    schreibemal alle deine bilder nebeneinander die auch nebeneinander sein sollen

    Beispiel

    <img src="bild1"/><img src="bild2"/><img src="bild3"/> usw...

    irgendwann wird dein codeprogramm zwar ein umbruch erzeugen weil die zeile zu lang wird lass dich davon aber nicht beeirren... und berichte von deinem erfolg
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  3. Mi. 30.09.2009 18:16 Uhr #3
    User Pic
    Loqi-X Mitglied
    Registriert seit
    13.10.2008
    Beiträge
    439
    Beitragswertungen
    1 Beitragspunkte
    Hab ich doch schon, ich glaube ob untereinander oder nebeneinander sit völlig egal: 

                <div id="pcc_topboxes"> 
                <div class="sponsors"> 
                    <img src="include/designs/PC-Design/img/pc_box_sponsors.png" alt="sponsors" width="68" height="13"/><br /> 
                    <img src="include/designs/PC-Design/img/sponsors_1.png" alt="sponsors" width="95" height="97"/> 
                    <img src="include/designs/PC-Design/img/sponsors_2.png" alt="sponsors" width="105" height="97"/> 
                    <img src="include/designs/PC-Design/img/sponsors_3.png" alt="sponsors" width="103" height="97"/> 
                    <img src="include/designs/PC-Design/img/sponsors_4.png" alt="sponsors" width="102" height="97"/> 
                    <img src="include/designs/PC-Design/img/sponsors_5.png" alt="sponsors" width="96" height="97"/> 
                </div> 
                <div class="partners"> 
                    <img src="include/designs/PC-Design/img/pc_box_partners.png" alt="partners" width="68" height="13"/><br /> 
                    <img src="include/designs/PC-Design/img/partners_1.png" alt="partners" width="95" height="97"/> 
                    <img src="include/designs/PC-Design/img/partners_2.png" alt="partners" width="105" height="97"/> 
                    <img src="include/designs/PC-Design/img/partners_3.png" alt="partners" width="103" height="97"/> 
                    <img src="include/designs/PC-Design/img/partners_4.png" alt="partners" width="102" height="97"/> 
                    <img src="include/designs/PC-Design/img/partners_5.png" alt="partners" width="96" height="97"/> 
 
                </div> 
                <div class="clear"></div> 
            </div>
    ARANYOSDESIGNS - Optimization is creative

    0 Mitglieder finden den Beitrag gut.
  4. Mi. 30.09.2009 18:36 Uhr #4
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    nein eben nicht bei inline elmenten ist es so das browser die neue zeile auch als leerzeichen interpretieren können das ist bei dir der fall also mach das mal... und vertrau mal ein bisschen als stur zu bleiben zwinker

    wenn du die grafiken markierst siehst du es das dazwischen leerzeichen sind


    Zuletzt modifiziert von lordrepha am 30.09.2009 - 18:39:49
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  5. Mi. 30.09.2009 18:53 Uhr #5
    User Pic
    Loqi-X Mitglied
    Registriert seit
    13.10.2008
    Beiträge
    439
    Beitragswertungen
    1 Beitragspunkte
    Erledigt, danke zwinker.

    MfG
    ARANYOSDESIGNS - Optimization is creative

    0 Mitglieder finden den Beitrag gut.
  6. Mi. 30.09.2009 19:04 Uhr #6
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    jetzt haste nur die grafik kleiner gemacht die leerzeichen sind immer noch drinne aber wenn dir das taugt dann solls recht sein lächeln
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten