XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Grafik richtig positionieren?! (http://xhtmlforum.de/showthread.php?t=46359)

Pumpkin 13.06.2007 13:24
Grafik richtig positionieren?!
 
Liste der Anhänge anzeigen (Anzahl: 1)
hallo,

ich möchte über dem logo drei grafiken richtig positionieren. doch das will mir nicht richtig gelingen.

Wie muss ich das richtig angehen? alle drei sollen sich auf einer ebene befinden und die grafik "in_navigation_2" und "_3.jpg" sollen links und rechts über der hintergrundgrafik "in_navigation_1.jpg" liegen, die sich über die gesamte breite erstreckt.

Ich hab noch eine grafik angehängt.

css
Code:
#head3 ul {
        font-size:small;
        text-align:center;
        list-style:none;
        height:34px;
        background:#000 url(ln_navigation_1.jpg) repeat-x;
}

#head3 ul li {
        display:inline;
}

#head3 ul li a {
        font-size:1.1em;
        margin-left:20px;
        padding-right:20px;
}

a.head3:link, a.head3:visited, a.head3:active, a.head3:hover {
        color:#eee;
        text-decoration:none;
}

a.head3:hover {
        color:#c00;
}

.t2 {
        float:right;
        height:34px;
        width:11px;
        background:#000 url(ln_navigation_2.jpg) no-repeat;
}

.t3 {
        float:left;
        height:34px;
        width:11px;
        background:#000 url(ln_navigation_3.jpg) no-repeat;
}
html
Code:
<body>
<div id="wrap">

<div class="t3"></div>

<div id="head3">
        <ul class="navilist">
                <li><a class="head3" href="#.html">link us</a></li>
                <li><a class="head3" href="#.html">contact</a></li>
                <li><a class="head3" href="#.html">team</a></li>
                <li><a class="head3" href="#.html">impressum</a></li>
        </ul>
</div> <!-- head3 end -->


<div class="t2"></div>
<div id="head">

</div> <!-- head end -->



<div id="sidebar">

Crizzo 13.06.2007 13:33
Die Grafiken sollten nebeneinander floaten und dann einen clear bekommen, damit der andere Inhalt wieder drunter weiter geht.

Kannst du das online stellen bzw. den ganzen Code posten, mit den Fetzen kann man nicht so viel anfangen.

Pumpkin 13.06.2007 20:26
danke für deine antwort. ich habs hier online gestellt:

100% Metal | www.metal4life.net

css
Code:
body {
        margin-top:0px;
        margin-left:0px;
        margin-right:0px;
        margin-bottom:0px;
        font-size:medium;
        color:#fff;
        background:#000 url(bg.jpg) repeat-x;
}

#wrap {
        margin:auto;
        width:660px;
        min-height:100%;
        text-align:left;
        padding-top:1px;
        background:#25282a url(wrap_bg.jpg) repeat-y;
}

#head {
        height:148px;
        width:660px;
        background:#000 url(logo.jpg) no-repeat;
}

#head3 ul {
        font-size:small;
        text-align:center;
        list-style:none;
        height:34px;
        background:#000 url(ln_navigation_1.jpg) repeat-x;
}

#head3 ul li {
        display:inline;
}

#head3 ul li a {
        font-size:1.1em;
        margin-left:20px;
        padding-right:20px;
}

a.head3:link, a.head3:visited, a.head3:active, a.head3:hover {
        color:#eee;
        text-decoration:none;
}

a.head3:hover {
        color:#c00;
}

#sidebar {
        float:left;
        font-size:large;
        width:200px;
        background:#25282a url(sidebar_bg.jpg) repeat-y;
}

#menu1 a, #menu1 a:visited, #menu1 a:active {
        display:block;
        background:#;
        color:#93A5A9;
        font:normal 12px verdana, sans-serif;
        text-decoration:none ;
        text-align:center;
        width:160px;
        border-bottom:solid 1px #313131;
        font-size:89%;line-height: 180%;
        font-family:"Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
}

#menu1 a:hover{
        background:#262626;
        color:#fff;
        text-decoration:none ;
}

#content_wrap {
        float:right;
        width:440px;
        background:#25282a url(content_bg.jpg) repeat-y;
}

#content {
        margin:10px 20px 10px 0;
        text-align:justify;
}

#footer {
        text-align:center;
        font-size:small;
        min-height:100%;
        padding:5px;
        color:#000;
        background:#e8e8e8 url(footer_bg.jpg) repeat-y;
        clear:both;
}

.footer_logo {
        margin-left:250px;
        height:25px;
        width:163px;
        background:#e8e8e8 url(footer_logo.jpg) no-repeat;
}



.t1 {
        height:34px;
        background:#000 url(ln_navigation_1.jpg) repeat-x;
}

.t2 {
        float:right;
        height:34px;
        width:11px;
        background:#000 url(ln_navigation_2.jpg) no-repeat;
}

.t3 {
        float:left;
        height:34px;
        width:11px;
        background:#000 url(ln_navigation_3.jpg) no-repeat;
}
html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>100% Metal | www.metal4life.net</title>
        <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<script>
function swap_content( span ) {
displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'block' : 'none';
document.getElementById( span ).style.display = displayType;
}
</script>
</head>
<body>
<div id="wrap">
<div class="t3"></div>

<div id="head3">
        <ul class="navilist">
                <li><a class="head3" href="#.html">link us</a></li>
                <li><a class="head3" href="#.html">contact</a></li>
                <li><a class="head3" href="#.html">team</a></li>
                <li><a class="head3" href="#.html">impressum</a></li>
        </ul>
</div> <!-- head3 end -->

<div class="t2"></div>
<div id="head">

</div> <!-- head end -->



<div id="sidebar">

<table    align="center"  id="menu1"  border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td >
<a href="index.php?content=main"  onfocus="this.blur()">&nbsp;&nbsp;Home</a></td>

</tr>
<tr>
<td >
<a href="index.php?content=news"  onfocus="this.blur()">&nbsp;&nbsp;Forum</a></td>
</tr>
<tr>
<td >
<a href="index.php?content=history" onfocus="this.blur()">&nbsp;&nbsp;#</a></td>
</tr>
<tr>
<td >
<a href="#" onMouseOver="swap_content('klappe'); return false;" onklick="swap_content('klappe'); return false;" 

onfocus="this.blur()">&nbsp;&nbsp;##</a>
        <span id="klappe" style="display: none"><a href=index.php?content=pupTD><font color=yellow>#</a>

        <a href=index.php?content=pupJB><font color=yellow>#</a>
        <a href=index.php?content=pupKG><font color=yellow>#</a></span>       

</td>
</tr>
<tr>
<td >
<a href="index.php?content=lyrics"  onfocus="this.blur()">&nbsp;&nbsp;#</a></td>
</tr><tr>
<td >
<a href="#" onMouseOver="swap_content('klappe2'); return false;" onklick="swap_content('klappe2'); return false;"

onfocus="this.blur()">&nbsp;&nbsp;##</a>
<span id="klappe2" style="display: none">

<a href=index.php?content=videos><font color=yellow>#</a>
<a href=index.php?content=videot><font color=yellow>#</a></span>


</td>
</tr>
<tr>
<td >
<a href="#" onMouseOver="swap_content('klappe3'); return false;" onklick="swap_content('klappe3'); return false;"

onfocus="this.blur()">&nbsp;&nbsp;##</a>
<span id="klappe3" style="display: none">
<a href=index.php?content=JB><font color=yellow>#</a>
<a href=index.php?content=><font color=yellow>#</a></span>

</td>
</tr>
<tr><td>
</td>

</tr>

</table>

</div> <!-- sidebar end -->



<div id="content_wrap">
<div id="content">
<p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

Bla Bla Bla Bla Bla Bla Bla </p>
</div> <!-- content end -->
</div> <!-- content_wrap end -->
<div id="footer">
<div class="footer_logo"></div>
</div> <!-- footer -->
</div> <!-- wrap -->
</body>
</html>

Crizzo 13.06.2007 20:31
wieso verwendest du nicht eine große Grafik?

@Problem:
Die kleinen Grafiken haben einfach einen Platz dort zu sein, wo du sie gerne hättest! Da ist diese große Grafik im Weg!
Weil sich "head3 ul" über die gesamte Breite legt, floaten Elemente brauchen eine Breite.

Pumpkin 13.06.2007 21:12
danke für die antwort.

ich hab nun eine grafik daraus gemacht.

Crizzo 13.06.2007 21:41
gibt den li-Elementen einen margin-left und right.

kadees 13.06.2007 22:06
Hi,
ohne dass ich jetzt Quelltext (HTML/CSS) überprüft habe fällt mir folgendes auf:
a)Beim hovern über die Links (##) auf der linken Seite werden im IE7 und Opera9 neue "Untermenüs" eingeblendet, im FireFox2 tut sich da nix.
b)Im IE7 erscheint bei mir mitten im Content ein Drop-Down-Menü (das da IMHO nicht reingehört), nicht jedoch im FireFox und Opera.

Edit:
Sehe gerade, dass du die Seite geändert hast!

Pumpkin 13.06.2007 22:43
Ja, da hatte ich etwas experimentiert. Ich hab das schon inzwischen alles entfernt.:lol:


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:33 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023