 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
waiu
Threadersteller
Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Fr 25.08.2006 13:14
Titel [CSS] Überlappender Bereich mit Schatten - Umsetzung? |
  |
|
Ich hab noch ne Frage 
Wie könnte ich sowas technisch umsetzen?
Es geht um den orange/braunen Kreis mit Schatten.
Enhalten ist ein Textfeld + Submit-Button.
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 25.08.2006 13:21
Titel
|
|
|
|
Gibt es wie immer verschiedene Möglichkeiten. Absolute Positionierung wäre z.B. auch hier möglich. Hast du schon irgendwas, Quelltext?
|
|
| |
 |
|
|
Anzeige
|
|
|
waiu
Threadersteller
Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 25.08.2006 13:27
Titel
|
|
|
Hier sind die Quelltexte, aber nicht lachen 
HTML-Seite:
| Code: | <body>
<div class="basis">
<img src="images/vis_man_links.gif" id="aussen" width="29" height="132" alt=" " title=" ">
<div class="navhead">
<p>
::<a href="#">Impressum</a>::<a href="#">Kontakt</a>::<a href="#">Sitemap</a>::<a href="#">Rechtl. Hinweise</a>
</p>
</div>
<div class="whitestripe">
<p>
</p>
</div>
<div class="content">
<div class="contentRight"><div class="spacer"> </div>
<div class="headline"><h1>Test</h1></div>
<div class="info"><h1>Test <b>99099</b></h1>
<p>Test <a href="#">:: Lageplan</a> <a href="#">:: Homepage</a></p>
</div>
<div class="seitenwechsel"><h1>Suchergebnis für den Bereich 99099</h1><p>Seite 1 von 3</p><a href="#">[1]</a> | <a href="#">2</a> | <a href="#">3</a></div>
<p>Lorem ipsum per id iusto urbanitas vituperatoribus, option adversarium te eum. In impedit voluptatibus usu, ut vero quodsi facilisis sed, eu lorem consequat sed. An ius scripta volumus convenire, vel lorem quaestio contentiones no. Prima takimata mel ut, quaeque electram id his. In congue fabellas quo.
Nam ex fastidii legendos, no vim percipit prodesset reprimique. Summo ubique possit has et. Augue vocibus vix id, eu semper vivendo reprimique sit. Magna deleniti pertinax ea eum, tempor integre recteque sit cu. Quis mediocritatem et nec, at salutandi adolescens has. Sit putant mentitum aliquyam et, eam in errem explicari, nulla oporteat verterem ex pri.
At quem perpetua sea, eum cu wisi oratio, eros erant ei usu. Qui ad tale complectitur. Usu te everti discere appetere, in pri malorum oporteat. Ex vim vidit consequat, ne facilis salutandi nec. In mea diceret eloquentiam, an sit timeam consequuntur.
Dicam convenire sea no. Molestie platonem abhorreant ut quo, in wisi delicatissimi mel. Vim natum graeco ad, duo probo vituperata mediocritatem id. In inani salutandi adipiscing pro, est eu odio vitae. In nam torquatos neglegentur, usu aliquid nominavi an. In nam qualisque ocurreret, equidem incorrupte duo id, velit nostrum est ne.
Denique efficiendi complectitur mei cu. Mea graeci reprimique ut, vix putant fastidii ex. At alterum efficiendi contentiones qui, nec alii menandri ocurreret an. Vis eu utroque feugait, vim cu ceteros deleniti. Ea eos praesent mediocritatem. Sit cu clita posidonium, ut his noluisse eleifend salutandi, habemus repudiare ut his.</p>
</div>
<div class="navv">
<p class="active">
<a href="#">Test</a>::
</p>
<p class="bold">
<a href="#">Test</a>::
</p>
<p>
<a href="#">Test</a>
</p>
<p>
<a href="#">Test</a>
</p>
<p>
<a href="#">Test</a>
</p>
<p class="bold">
<a href="#">Test</a>
</p>
<p class="bold">
<a href="#">Test</a>
</p>
</div>
</div>
<div class="navfooter">
<p>
::<a href="#">Impressum</a>::<a href="#">Kontakt</a>::<a href="#">Sitemap</a>::<a href="#">Rechtl. Hinweise</a>
</p>
</div>
</div>
</body> |
CSS | Code: | body
{
font-family: Arial, Verdana, Helvetica, sans-serif;
background-color:#fff;
font-size: 12px;
}
div.basis {
width: 739px;
margin: 0px auto;
text-align: left;
background-color:#DBD8D5;
position:relative;
}
h1 {font-size:18px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;}
h3 {font-size:14px;color:#000000;}
p {margin:0px;}
img#aussen {
position:absolute;
top: 1px;
left: -29px;
}
div.navhead {
margin: 0 0 0 0;
height: 34px;
background-color:#39607B;
background-image: url(../images/vis_man_oben.gif);
background-repeat: no-repeat;
}
div.navhead p {
margin: 0 0 0 178px;
padding: 10px 0 0 0;
color:#fff;
}
div.navhead p a:link, a:visited, a:active, a:hover {
text-decoration:none;
font-weight:bold;
color:#fff;
margin: 0 6px 0 6px;
}
div.navhead p a:hover {
text-decoration:underline;
color:#F8F5F5;
}
div.whitestripe {
height: 4px;
margin: 0px;
padding: 0px;
background-color: white;
background-image: url(../images/vis_man_mitte.gif);
background-repeat: no-repeat;
}
div.whitestripe {
font-size: 1px;
}
div.navfooter {
height:34px;
background-color:#39607B;
border-top: 4px white solid;
}
div.navfooter p {
margin: 0 0 0 178px;
padding: 10px 0 0 0;
color:#fff;
}
div.navfooter p a:link, a:visited, a:active, a:hover {
text-decoration:none;
font-weight:bold;
color:#fff;
margin: 0 6px 0 6px;
}
div.navfooter p a:hover {
text-decoration:underline;
color:#F8F5F5;
}
div.content {
background-image: url(../images/vis_man_unten.gif);
background-repeat: no-repeat;
background-position: top left;
}
div.navv {
text-align: right;
width: 166px;
margin: 0px 0 50px 0;
position:absolute;
top: 150px;
}
div.navv p {
margin: 6px 0 6px 0;
color: #D1651D;
font-weight: normal;
}
div.navv p a:link {
margin: 6px 0 6px 0;
color: #D1651D;
text-decoration: none;
margin: 0 3px 0 0;
font-weight: normal;
}
div.navv p a:active {
margin: 6px 0 6px 0;
color: #D1651D;
text-decoration: none;
margin: 0 3px 0 0;
font-weight: normal;
}
div.navv p a:visited {
margin: 6px 0 6px 0;
color: #D1651D;
text-decoration: none;
margin: 0 3px 0 0;
font-weight: normal;
}
div.navv p a:hover {
margin: 6px 0 6px 0;
color: #D1651D;
text-decoration: none;
margin: 0 3px 0 0;
font-weight: normal;
}
div.navv p.active {
padding: 2px 0 2px 0;
background-color: #D1651D;
color: white;
text-decoration: none;
font-weight: bold;
}
div.navv p.active a:link {
font-weight: bold;
color: white;
text-decoration: none;
margin: 0 3px 0 0;
font-weight: bold;
}
div.navv p.bold a:link {
font-weight: bold;
}
div.contentRight {
margin: 0 0 0 175px;
}
div.spacer{
width: 200px;
height: 20px;
font-size: 1px;
}
div.headline {
padding: 2px 2px 2px 14px;
background-color: #39607B;
}
div.headline h1 {
font-size: 13px;
color: white;
text-transform: uppercase;
}
div.info {
margin: 6px 0 0 0;
padding: 5px 5px 5px 14px;
background-color: #D8B90E;
}
div.info h1 {
color: white;
font-size: 16px;
font-weight: normal;
}
div.info p {
color: white;
}
div.info p a:link {
color: white;
font-weight: bold;
text-decoration: none;
display: inline;
margin: 0px;
}
div.info p a:active {
color: white;
font-weight: bold;
text-decoration: none;
display: inline;
margin: 0px;
}
div.info p a:visited {
color: white;
font-weight: bold;
text-decoration: none;
display: inline;
margin: 0px;
}
div.info p a:hover {
color: white;
font-weight: bold;
text-decoration: none;
display: inline;
margin: 0px;
}
div.seitenwechsel {
margin: 10px 0 10px 0;
}
div.seitenwechsel h1 {
display:inline;
margin: 0 60px 0 0;
}
div.seitenwechsel p {
display:inline;
} |
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 25.08.2006 13:34
Titel
|
|
|
Ok, da hab ich jetzt ziemlich wenig durchblick, gibt es das vielleicht auch online? Also generell kannst du es so versuchen wie eben auch:
| Code: | #rechtsoben {
position:absolute;
top:0;
right:0;
width: breite deiner Grafik.
height: höhe deiner Grafik.
background: deine Grafik.
}
<div id="rechtsoben">
<input ...>
</div> |
Einfach die Grafik so passend ausschneiden, dass du sie oben rechts positionieren kannst.
|
|
| |
|
|
waiu
Threadersteller
Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 25.08.2006 13:41
Titel
|
|
|
Nein, online gibt es das (noch) nicht. Und wenn, dann muss es fertig sein 
Ich werde Deinen Hinweis beachten, vielen Dank 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
HP - Technische Umsetzung
Umsetzung Layout Tab./DIV
Layout-Umsetzung
flashsite umsetzung
KPI / Dashboard Umsetzung
Umsetzung als Blog möglich
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
