✔ css Grafik mit Rundung

Status
Nicht offen für weitere Antworten.
S

spamerix

Mitglied
Hallo

Ich habe da ein Problem.

Und zwar ist meine linke Grafik nicht Richtig zu sehen.

Wie bekomme ich das hin das sie richtig zusehen ist?

Und dann auch noch eine Grafik an hänge als repat?

Hier html code:

<!-- Put IE into quirks mode -->
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testen</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="layout_ie.css">
<![endif]-->
</head>
<body>
<div id="maincontainer">

<div id="header"><APPLET archive="DuriusWaterPic.jar" WIDTH="1500" HEIGHT="130" ALIGN="MIDDLE" CODE="DuriusWaterPic.class">
<PARAM NAME="cabbase" VALUE="DuriusWaterPic.cab">
<PARAM NAME="image" VALUE="bg_head_middle.jpg">
<PARAM NAME="dim" VALUE="5">
<PARAM NAME="noise" VALUE="0">
<PARAM NAME="mouse" VALUE="9">
<PARAM NAME="timer" VALUE="0">
<PARAM NAME="target" VALUE="_blank">
<PARAM NAME="url" VALUE="http://www.bluebrain.nl/">
<PARAM NAME="bg" VALUE="000000">
<PARAM NAME="reg" VALUE="22454732">
</APPLET>
</div>

<div id="contentcontainer">

<div id="topNavi">
<h2><center>topNavi</h2></center>
</div>

<div id="content" style="height: 2000px;" >
<p>
<center>news</center>
</p>
</div>
</div>

<div id="rechts" style=" border:1px solid red; -moz-border-radius:50px;"><center>rechts

<p><iframe src="shoutbox/index.php" name="Shoutbox" width="182" height="400"
marginheight="0" marginwidth="0" align="top">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe></p></center>
<br>
<center>
<script type="text/javascript">
// <![CDATA[
// chCounter
// settings:
cstatus = "active";
visible = "1";
page_title = "";
url_of_counter_file = "http://spamerix.de/counter/counter.php";

////////////////
page_url = unescape( location.href );
referrer = ( document.referrer ) ? document.referrer : "";
page_title = ( page_title.length == 0 ) ? document.title : page_title;
document.write( "<script type=\"text/javascript\" src=\"" );
document.write( url_of_counter_file + "?chCounter_mode=js&amp;jscode_version=3.1.3&amp;status=" + cstatus + "&amp;visible=" + visible + "&amp;page_title=" + encodeURIComponent( page_title ) );
document.write( "&amp;page_url=" + encodeURIComponent( page_url ) + "&amp;referrer=" + encodeURIComponent( referrer ) + "&amp;res_width=" + screen.width + "&amp;res_height=" + screen.height + "\"><" + "/script>" );
// ]]>
</script>
<noscript>
<object data="http://spamerix.de/counter/counter.php?chCounter_mode=noscript" type="text/html"></object>
</noscript></center>
</div>

<div id="links" style="position: 15px;"><center>links</center>

<center>Test Grafik</center>
</div>

<div id="footer"><center>unten</center>
</div>
</div>
</body>
Zum Vergrößern anklicken....

Hier css datei Firefox:

*{ margin: 0;
padding: 0;}

body, html{ height: 100%;}

body { background: url(main-bg.gif) repeat-y;
border: 0;
overflow: hidden;
text-align: center;}

#maincontainer{ position: relative;
width: 100%;
height: 100%;
text-align: left;}


#header{ position: absolute;
top: 0;
height: 130px;
width: 100%;
z-index: 5;
background: #f00;}

#links{ position: absolute;
top: 130px;
bottom: 20px;
left: 37%;
margin-left: -480px; /* 960:2 */
width: 117px;
background-image: url(linkbogen.gif);
}
#rechts{ position: absolute;
top: 130px;
bottom: 20px;
left: 53%;
margin-left: 360px; /* 960:2 - 120 */
width: 240px;
background: #0ff;}

#contentcontainer{ position: absolute;
top: 130px;
bottom: 20px;
left: 33%;
margin-left: -310px;
width: 925px;
background: #fff;
overflow: auto;
max-width:940px;
}


#topNavi {
height: 25px;
background: #ff0;
border-top: 1px solid #b8b8b8;
border-bottom: 1px solid #b8b8b8;
}


#footer{ position: absolute;
bottom: 0;
left: 37%;
margin-left: -480px;
height: 20px;
width: 1340px;
z-index: 5;
background: #ff0;}
Zum Vergrößern anklicken....

Hier css IE:

#links{ position: absolute;
top: 0;
left: 483px;
margin-left: -480px; /* 960:2 */
width: 70px;
height: 100%;
padding: 130px 0 20px 0;
background: #f0f;}

#rechts{ position: absolute;
top: 0;
left: 55%;
margin-left: 360px; /* 960:2 - 120 */
width: 220px;
height: 100%;
padding: 130px 0 20px 0;
background: #0ff;}

#contentcontainer{ position: absolute;
top: 0;
left: 486px;
margin-left: -310px;
width: 886px;
background: #fff;
height: 100%;
border-width: 130px 0 20px 0;
border-style: solid;
border-color: #fff;
overflow: auto;
max-width:970px;
}

#topNavi {
height: 25px;
background: #ff0;
border-top: 1px solid #b8b8b8;
border-bottom: 1px solid #b8b8b8;
}

#footer{ bottom: -1px;}
Zum Vergrößern anklicken....

Hier Link zur Test Seite:

Hier Link zur Test Seite

Ich hoffe mal ich habe mein Problem halbwegs gut erklärt.
 
Hi,

überprüf mal für #links und #rechts deren linke Startpositionen und margin-left-Deklarationen im Kontext zu ihrer tatsächlichen Elementbreite - kein Wunder, dass sie zum Teil im Niemandsland des Viewports verschwinden ;)

Und wieso sollen für den IE die Boxen 47px (#links) und 20px (#rechts) schmäler sein?

mfg Maik
 
Oh ich dummi, bin aber auch noch Anfänger.

Danke dir schon mal wie bekomme ich jetzt die Grafik als Repat unter die andere?

Hier das pic

Zum IE der hatte immer einen grauen Streifen drine, da habe ich solange rum getestet bis er wech wa.
 
Wenn ich deine Vorstellungen und das vorliegende Stylesheet soweit richtig interpretiere, kannst du die Grafik als vertikal zu wiederholendes Hintergrundbild im DIV #maincontainer einsetzen:

Code: 
#maincontainer{ position: relative;
width: 100%;
height: 100%;
text-align: left;
background:url(bogenrepat.gif) left top repeat-y;}
mfg Maik
 
Vielleicht solltest du hier mal besser eine Vorschau des Sollzustandes hochladen, damit ich dir folgen kann.

mfg Maik
 
Maik ich habe es jetzt so gemacht nen Freund hat mir bei geholfen.

#links{ position: absolute;
top: 130px;
bottom: 20px;
left: 37%;
margin-left: -480px; /* 960:2 */
width: 180px;
background-image: url(linkbogen.gif);
background-repeat: no-repeat;
}
#links2{ position: absolute;
top: 530px;
bottom: 20px;
left: 37%;
margin-left: -480px; /* 960:2 */
width: 91px;
background-image: url(bogenrepat.gif);
}



#rechts{ position: absolute;
top: 130px;
bottom: 20px;
left: 590px;
margin-left: 360px; /* 960:2 - 120 */
width: 350px;
background-image: url(rechtsbogen.gif);
background-repeat: no-repeat; }

#rechts2{ position: absolute;
top: 150px;
bottom: 20px;
left: 678px;
margin-left: 360px; /* 960:2 - 120 */
width: 245px;
background-image: url(bogenrepat.gif);


Jetzt kommt aber das nächste Problem alles was in der mitte unter den Grafiken ist kann man jetzt nicht mehr klicken.

Also ich meinte in der mitte die News Spalte.

So sieht es jetzt aus.

Das wären meine vorstellungen gewessen leider kann man jetzt nichts in der news php klicken was unter der Grafik ist leider, man kan es am rechten Scrollbalken sehen und testen.

Was mache ich jetzt dagegen.
 
Eine Möglichkeit wäre, für das DIV #contentcontainer mittels z-index eine höhere Schichtposition festzulegen, damit es vom benachbarten DIV mit der Grafik "rechtsbogen.gif" nicht mehr überdeckt wird, sondern im Zweifelsfall dieses Element überdeckt, und so der Scrollbalken wieder nutzbar ist:

Code: 
#contentcontainer{ position: absolute;
                   top: 130px;
                   bottom: 20px;
                   left: 33%;
                   margin-left: -310px;
                   width: 925px;
                   background: #fff;
                   overflow: auto;
                   max-width:940px;
                   z-index:1000;
}
Wenn dir das aus irgendeinem Grund nicht ins Konzept passen sollte, müsstest du dir über eine alternative Umsetzung des Seitenkonzepts Gedanken machen, bei dem beispielsweise das rechte Bild direkt im Dokumentkörper (body) oder Viewport (html) als Hintergrundbild zum Einsatz kommt.

mfg Maik
 
Ich habe jetzt mal die Rundungen als eine kleinere Grafik gemacht.

Die jetzt so ausieht..

Ich poste jetzt noch mal die html und css

Hier die html:

<!-- Put IE into quirks mode -->
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testen</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="layout_ie.css">
<![endif]-->
</head>




<body>





<div id="maincontainer">
<div id="header"><APPLET archive="DuriusWaterPic.jar" WIDTH="1500" HEIGHT="70" ALIGN="MIDDLE" CODE="DuriusWaterPic.class">
<PARAM NAME="cabbase" VALUE="DuriusWaterPic.cab">
<PARAM NAME="image" VALUE="bg_head_middle.jpg_">
<PARAM NAME="dim" VALUE="5">
<PARAM NAME="noise" VALUE="0">
<PARAM NAME="mouse" VALUE="9">
<PARAM NAME="timer" VALUE="0">
<PARAM NAME="target" VALUE="_blank">
<PARAM NAME="url" VALUE="http://www.bluebrain.nl/">
<PARAM NAME="bg" VALUE="000000">
<PARAM NAME="reg" VALUE="22454732">
</APPLET>


</div>


<div id="header2"><center>Dieses ding soll nicht die Rundungen rechts und links über decken</center>
</div>




<div id="contentcontainer">





<div id="topNavi">
<h2><center>topNavi</h2></center>
</div>


<div id="content" style="height: 2000px;" >
<p>
<center>news</center>
</p>
</div>
</div>




<div id="rechts" >
</div>

<div id="rechts2" >
<center>rechts</center>

</div>



<div id="links">
</div>



<div id="links2">

<center>links</center>

<center>Test Grafik</center>

</div>




<div id="footer"><center>unten</center>
</div>
</div>
</body>
</html>
Zum Vergrößern anklicken....

Hier die css:

*{ margin: 0;
padding: 0;}

body, html{ height: 100%;}

body { background: #fff;
border: 0;
overflow: hidden;
text-align: center;}

#maincontainer{ position: relative;
width: 100%;
height: 100%;
text-align: left;

}


#header{ position: absolute;
top: 0;
height: 70px;
width: 100%;
z-index: 5;
background: #000;}

#header2{ position: absolute;
top: 70px;
height: 146px;
width: 780px;
left: 690px;
margin-left: -480px; /* 960:2 */
z-index: 5;
background: #465;}




#links{ position: absolute;
top: 70px;
bottom: 20px;
left: 578px;
margin-left: -480px; /* 960:2 */
width: 200px;
background-image: url(rundungobennewslinks.gif);
background-repeat: no-repeat;
}
#links2{ position: absolute;
top: 70px;
bottom: 20px;
left: 480px;
margin-left: -480px; /* 960:2 */
width: 100px;
background-image: url(bogenrepat.gif);
}



#rechts{ position: absolute;
top: 70px;
bottom: 20px;
left: 590px;
margin-left: 360px; /* 960:2 - 120 */
width: 350px;
background-image: url(rundungobenrechts.gif);
background-repeat: no-repeat; }

#rechts2{ position: absolute;
top: 70px;
bottom: 20px;
left: 678px;
margin-left: 360px; /* 960:2 - 120 */
width: 245px;
background-image: url(bogenrepat.gif);
}


#contentcontainer{ position: absolute;
top: 216px;
bottom: 20px;
left: 411px;
margin-left: -310px;
width: 937px;
background: #fff;
overflow: auto;
max-width:960px;
}


#topNavi {
height: 50px;
background: #ff0;
border-top: 1px solid #b8b8b8;
border-bottom: 1px solid #b8b8b8;
}


#footer{ position: absolute;
bottom: 0;
left: 37%;
margin-left: -480px;
height: 20px;
width: 1340px;
z-index: 5;
background: #ff0;}
Zum Vergrößern anklicken....

So jetzt taucht aber wieder ein Problem auf, und zwar wen ich oben in der mitte unter den Header die grafik grösser mache.

Sind die Rundungen wieder wech.

Wie bekomme ich es jetzt hin das sie wieder da sind wen die Grafik grösser ist.

Habe sie mit absicht auf einer Seite über die Rundung gemacht, das ihr seht was ich meine.

Hier noch mal Link zur Seite.

Hier der Link

ediert:

Ich habs wieder durch ein Freund der mir nen stups in maik sein letzten post gegeben hat.

alt css:

#header2{ position: absolute;
top: 70px;
height: 146px;
width: 780px;
left: 690px;
margin-left: -480px; /* 960:2 */
z-index: 5;
background: #465;}

neu css:

#header2{ position: absolute;
top: 70px;
height: 146px;
width: 780px;
left: 690px;
margin-left: -480px; /* 960:2 */
z-index: 0;
background: #465;}

Bitte aber noch nicht schliessen diesen Thread.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück