• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildrahmen autoamtisch mit dem Text verlängern

C

creme

Neues Mitglied
Hi Leute,
bin heute das erste Mal in die CSS Programmierung eingestiegen, daher habt etwas Nachsicht ;)

Das 1. Problem ist auf dem Bild zu erkennen, einmal wird der Rahmen in dem der Text stehen soll auseinandergezogen, was mache ich falsch?
2. Wird mein Text nicht angezeigt, lese dazu über den php Befehl den Text aus einer txt Datei ein, das zeigt er irgendwie nicht an. Die Txt-Datei befindet sich in demselben Ordner wie die index.html

Jemand ne Idee?

EDIT: Ich kann keine Anhänge verwalten, sehe nur ein grünes Fenster.

Daher habe ich die Dateien extern hochgeladen.
TestHomepage.zip
design_bild.jpg

Grüße
 
Ja geht mir genau so... Aber nur den relevanten PHP und HTML/CSS Code, nicht alles :D

Zu 1) Wie sollte es denn aussehen? Der Text weiter nach rechts? Oder ist was mit den weissen Rechtecken? Das Bild ist relativ klein^^

mfg
 
ich auch, ich auch *aufgereckthüpfen*

zip ist echt nichts, zeige Link bei css sachen.
(wenn ich das noch einmal schreibe bau ich mir ein script der das immer einfügt :O) )

Das ist padding

tipp: such mal nach einer reset.css und füge die als ersten ein und dann kommt deine css wo alles schick machst.

Cheffchen
 
 

Anhänge

  • page_vorlage.jpg
    page_vorlage.jpg
    12,2 KB · Aufrufe: 3
  • design_bild.jpg
    design_bild.jpg
    9,3 KB · Aufrufe: 6
Also mir schon, ich bin da faul. Stell es online und ich schaue es mir im Firebug an. ;)

Aber um von deinem ersten Screenshot auszugehen, sehe ich hinsichtlich der HTML-Struktur des Kastens zwei Ansätze. Entweder einen Wrapper mit einem durchgehenden Border und das Element mit dem schwarzen Hintergrund dort hinein packen, oder du stellst Beides direkt übereinander, gibst dem Background-Element einen Border links und rechts, und dem anderen einen Rahmen für links, rechts und unten.
 
Hi

Meine Website

der Rahmen oben und die Rahmen an der seite sind jeweils zwei Bilder.

Ich versteh dein lösungsansatz nicht ;). Kannst du das vielleicht in einem Beispielcode verdeutlichen?

Grüße
 
Lass die Bilder einfach weg, so etwas geht auch mit CSS. Baue einen Container mit grauem background und border-radius und bette einen weiteren Container mit weißem Background und border-radius ein. In letzterem steht dann der Text.
 
Hi schau mal bitte meine Page nochmal an, ich schaffe es nicht die zweite Box innerhalb der grauen Box zu zentrieren...


CSS-Code:
#website {
width: 920px;
margin: 0 auto;
}

#rahmen {
width: 920px;
/*height: 500px; */
/*background: #636363; */
background: #636363 repeat-y;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}

#text {
width: 500px;
background: white;
margin-top: 10px;
margin-left: 50px;
}
Zum Vergrößern anklicken....

index.html

<div id="website">
<div id="rahmen">
<div id="text">
/*
TEXT
<br>s
s<br>
s<br>
s<br>
s
s
s
s
*/
</div>
</div>
</div>
Zum Vergrößern anklicken....
 
HTML: 
<div id="aussen">
  <div id="innen"></div>
</div>

Code: 
#innen, #aussen {
  border-radius: 5px;
}

#aussen {
  background: black;
  width: 970px;
  height: 500px;
  margin: 0 auto;
}

#innen {
  margin: 20px 0 auto;
  background: white;
  width: 960px;
  height: 495px;

}

Etwa so dachte ich.
 
Hi habs jetzt 1zu1 von dir übernommen, die linke Seite überlappt, siehe Homepage:

Meine Website

EDIT:

Das was du mir als Beispiel gezeigt hattest ist ja klar wieso rechts und unten der Rahmen zu sehen ist, weil die weiße innere Box kleiner ist.

Es muss doch möglich sein einfach zwei Boxen zu definieren und anschließend den Abstand der inneren Box zu definieren über margin.

Margin bestimmt aber den Abstand der äußeren Box ... versteh ich nicht.
 
Zuletzt bearbeitet:
Code: 
#aussen {
    background: none repeat scroll 0 0 black;
    border: 1px solid black;
    height: 500px;
    margin: 0 auto;
    width: 970px;


}

#innen {
    background: none repeat scroll 0 0 white;
    height: 475px;
    margin: 20px 5px auto;
    width: 960px;


}

Damit hast du oben einen Rahmen von 20px und an den restlichen Seiten von 5px.

Etwas Eigeninitiative beim Anpassen des Codes musst du schon bringen.
 
Hi hatte es schon hinbekommen, aber trotzdem vielen Dank.

Ein Problem habe ich noch, ich kriege das Logo "My electronic lab" und das Menü nicht linksbündig, so das sie auf gleicher Höhe sind (siehe Bild).

linksbuendig.jpg

HTML: 
<head>
    <title>Meine Website</title>
    <link rel="stylesheet" type="text/css" href="design.css">
</head>

<body>
<div id="kopfzeile">
<div id="kopfzeile_menu">
                    <ul>
                        <li class="current_page_item"><a href="#" class="first">Home</a></li>
                        <li><a href="#">Projekte</a></li>
                        <li><a href="#">Grundlagen</a></li>
                        <li><a href="#">Me</a></li>
                        <li><a href="#">Kontakt</a></li>
                </ul>
</div>
</div>
<div id="logo">
           <h1>My electronics lab</h1>
            <p><em> Elektronikprojekte aller Art...</em></p>
</div>
<div id="website">
    <div id="aussen">
        <div id="innen">
        <div id="inhalt">
        Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. 
        <br>Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. 
        <br>Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.
        </div>
        </div>
    </div>
</div>
</body>
</html>

Code: 
/* Created by TopStyle Trial - www.topstyle4.com */
body {
    margin: 0px;
    padding: 0;
    background: #FFFFFF url(images/kopfzeile_menu_bg.jpg) repeat-x left top;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #838383; /*Schriftfarbe grau*/
}

/* Kopfzeile Menü */

#kopfzeile {
        width: 920px;
        height: 50px;
        margin: 0 auto;
        padding-top: 10px;
}

#kopfzeile_menu {
     float: left;
    width: 700px;
}

#kopfzeile_menue ul {
        margin: 0;
        padding: 8px 0px 0px 0px;
        list-style: none;
        line-height: normal;
}

#kopfzeile_menu li {
        display: block;
        float: left;
        background: url(images/trennstrich.jpg) no-repeat right 10px;
}

#kopfzeile_menu a {
        display: block;
        float: left;
        margin: 0px 6px;
        padding: 6px 20px 6px 20px;
        letter-spacing: -1px;
        text-decoration: none;
        text-align: center;
        text-transform: capitalize;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        color: #8E8E8E;  /* farbe der menu schrift*/
}

#kopfzeile_menu a:hover {
        text-decoration: none;
        background: #6A6A6A;
        color: #FFFFFF;
}

#kopfzeile_menu .current_page_item a { /* home mit einem grauen kasten markieren*/
        background: #6A6A6A;
        color: #FFFFFF;
}

/** Logo */
#logo {
        width: 920px;
        height: 90px;
        margin: 0 auto;
        padding: 30px 20px 30px 20px;

}

#logo h1, #logo p {
        margin: 0px auto;
        line-height: normal;
        text-transform: none;
        font-weight: normal;
        color: #000000;
}

#logo p {
        margin-top: -4px;
        text-transform: none;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 13px;
        color: #404040;
}

#logo h1 {
        font-size: 40px;
}


#website {
    width: 920px;
    margin: 0 auto;
}

#aussen, #innen {
     border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
}

#aussen {

    width: 920px;
   background: #636363 repeat-y; 
    margin:0px auto; 
    border:solid transparent 1px;

}

#innen {

    margin: 70px 10px 10px 10px;
    width: 900px;
    background: white;
}

#inhalt {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px; 
}
 
meinst so?

Code: 
#kopfzeile {

     height: 50px;
    margin: 0 [COLOR=#FF0000]6em[/COLOR][COLOR=#FF0000];[/COLOR]

    padding-top: 10px;
    width: 920px;
 
Hi danke dir,

musste den Wert auf 10em ändern, das es passte.

Bedeutet das das ich sich der Abstand für einen anderen besucher mit einer anderen Auflösung wieder ändert?
Welche Auswirkungen hat ein fester Wert?

Grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben