Anzeige

2 Ränder mit css, xhtml?

2 Ränder mit css, xhtml? | PSD-Tutorials.de

Erstellt von xero7, 14.09.2007.

  1. xero7

    xero7 » Unterdrück(t)er

    Dabei seit:
    30.08.2006
    Beiträge:
    1.873
    Geschlecht:
    männlich
    Ort:
    » Bremen
    2 Ränder mit css, xhtml?
    Hallo,

    ich sehe immer öffter Seiten, login... , wo sowelche doppelränder sind.

    Confixx Professional

    Da kann man es auch gut erkennen.
    Und wie bekommt man es hin, dass es wie auf der Seite, der Rand beim text aufhört und danach wieder anfängt?

    Liebe grüße
     
    #1      
  2. kart6

    kart6 Guest

    2 Ränder mit css, xhtml?
    AW: 2 Ränder mit css, xhtml?

    Also du willst, dass du 2 Kästchen hast, bei denen etwas über dem Rand steht?

    Ich würde 4 Div-Container machen, 2 Davon groß und um den jeweiligen text, untereinander platziert und 2 die position: absolute; haben und über dem Rand mit backgroundcolor stehen...

    also so ungefähr:

    HTML
    HTML:
    1.  
    2.     <head>
    3.         <link rel="stylesheet" type="text/css" href="css.css" />
    4.     </head>
    5.     <body>
    6.         <div id="container1">
    7.             <div id="headline">
    8.                 Headline
    9.             </div>
    10.             Hier kommt Text
    11.         </div>
    12.         <div id="container2">
    13.             <div id="headline">
    14.                 Headline2
    15.             </div>
    16.             Das ist der 2.Text
    17.         </div>
    18.     </body>
    19. </html>
    20.  

    CSS
    Code (Text):
    1.  
    2. body {
    3. background-color: #999999;
    4. }
    5. #container1 {
    6.     width: 390px;
    7.     height: 190px;
    8.     position: absolute;
    9.     left: 50%;
    10.     top: 50%;
    11.     margin-left: -200px;
    12.     margin-top: -100px;
    13.     border: 1px solid #535353;
    14.     padding: 5px;
    15. }
    16. #container2 {
    17.     width: 390px;
    18.     height: 90px;
    19.     position: absolute;
    20.     left: 50%;
    21.     top: 71%;
    22.     margin-left: -200px;
    23.     margin-top: -50px;
    24.     border: 1px solid #535353;
    25.     padding: 5px;
    26. }
    27. #headline {
    28.     position: absolute;
    29.     top: -12px;
    30.     background-color: #999999;
    31. }
    32.  
     
    #2      
  3. xero7

    xero7 » Unterdrück(t)er

    Dabei seit:
    30.08.2006
    Beiträge:
    1.873
    Geschlecht:
    männlich
    Ort:
    » Bremen
    2 Ränder mit css, xhtml?
    AW: 2 Ränder mit css, xhtml?

    Ah verdtanden, danke,

    aber es gibt auch noch sowas mit doppelten Rändern.

    Also das 2 Rändern z.b. weiß und schwarz nebeneinander sind.
     
    #3      
  4. kart6

    kart6 Guest

    2 Ränder mit css, xhtml?
    AW: 2 Ränder mit css, xhtml?

    Es gibt die css-eigenschaft "border-style" mehr dazu auf: css4you :)

    gruß
    kart
     
    #4      
  5. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    2 Ränder mit css, xhtml?
    AW: 2 Ränder mit css, xhtml?

    Sowas nennt sich Fieldset und ist normales HTML.

    HTML:
    1.  
    2. <fieldset style="width:30%">
    3.             <legend>Ich stehe oben</legend>
    4.             <p>Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt.Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. Ich bin Inhalt. </p>
    5.  


    Duddle
     
    #5      
x
×
×