mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Sa 26.05.2012 09:30 Benutzername: Passwort: Auto-Login

Thema: [CSS] Überlappender Bereich mit Schatten - Umsetzung? vom 25.08.2006

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Überlappender Bereich mit Schatten - Umsetzung?
Autor Nachricht
waiu
Threadersteller

Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.08.2006 13:14
Titel

[CSS] Überlappender Bereich mit Schatten - Umsetzung?

 Antworten mit Zitat Zum Seitenanfang
Ich hab noch ne Frage Ooops

Wie könnte ich sowas technisch umsetzen?
Es geht um den orange/braunen Kreis mit Schatten.
Enhalten ist ein Textfeld + Submit-Button.
  View user's profile Private Nachricht senden
 
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.08.2006 13:21
Titel

Antworten mit Zitat Zum Seitenanfang
Gibt es wie immer verschiedene Möglichkeiten. Absolute Positionierung wäre z.B. auch hier möglich. Hast du schon irgendwas, Quelltext?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
waiu
Threadersteller

Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.08.2006 13:27
Titel

Antworten mit Zitat Zum Seitenanfang
Hier sind die Quelltexte, aber nicht lachen Grins


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>
         &nbsp;
      </p>
   </div>
   <div class="content">
      <div class="contentRight"><div class="spacer">&nbsp;</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;
}
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.08.2006 13:34
Titel

Antworten mit Zitat Zum Seitenanfang
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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
waiu
Threadersteller

Dabei seit: 16.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.08.2006 13:41
Titel

Antworten mit Zitat Zum Seitenanfang
Nein, online gibt es das (noch) nicht. Und wenn, dann muss es fertig sein *zwinker*

Ich werde Deinen Hinweis beachten, vielen Dank Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen schatten mit css?!
[CSS] Schatten
Schatten im IE: CSS, HTML - zur not javascript
CSS PNG-Rahmen/-Schatten an allen Seiten
[CSS] Wiederholender Content-Bereich
scrollbarer Bereich bei print.css
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.

mediengestalter.info ist ein Projekt von webformatik :: Forensoftware: phpBB © 2001, 2005 phpBB Group