Bildrahmen autoamtisch mit dem Text verlängern

creme · 10 Oktober 2012

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

Grüße

Timmer · 11 Oktober 2012

Ich würde dir gerne helfen, jedoch werde ich nichts von einem externen Anbieter laden (und wie es scheint auch niemand anderes) ^^

Pack den Code doch lieber in Code-Tags oder kopiere ihn in einen Paste-Service (Pastebin.com - #1 paste tool since 2002!) und poste die Links hier ;)

phzu · 11 Oktober 2012

Ja geht mir genau so... Aber nur den relevanten PHP und HTML/CSS Code, nicht alles

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

Cheffchen · 11 Oktober 2012

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

creme · 11 Oktober 2012

Hi vielen Dank das ihr mir alle helfen wollt.

Zunächst mal die index.html, ist nicht viel Code

HTML:

 index.html - Pastebin.com[/url]

Dann die design.css , bei der css design sind die id's #header und #inhalt das Problem. 
[url=http://pastebin.com/PHpfNKeH][CSS] design.css - Pastebin.com[/url]

header_big.jpg in der css-Datei ist der Rahmen oben, und rahmen_big.jpg ist halt der Rahmen links und rechts ^^

Mein Ziel ist das so wie in Bild zu erreichen (siehe page-vorlage.jpg):

[ATTACH]2869.vB[/ATTACH]

Hab nochmal die Stellen rot markiert, die durch mein Code verunstaltet werden :(

[ATTACH]2870.vB[/ATTACH]

Grüße

creme · 13 Oktober 2012

Hey ihr wart doch so motiviert, zu viel Code?

Grüße

Tronjer · 13 Oktober 2012

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.

creme · 13 Oktober 2012

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

Tronjer · 13 Oktober 2012

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.

creme · 13 Oktober 2012

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;
}

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>

Tronjer · 13 Oktober 2012

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.

creme · 13 Oktober 2012

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.

creme · 14 Oktober 2012

Scheint doch wohl schwerer zu sein als es ist.

Tronjer · 14 Oktober 2012

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.

creme · 14 Oktober 2012

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).

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; 
}

efwe · 14 Oktober 2012

meinst so?

Code:

#kopfzeile {

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

    padding-top: 10px;
    width: 920px;

creme · 14 Oktober 2012

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

Bildrahmen autoamtisch mit dem Text verlängern

creme

Neues Mitglied

Timmer

Mitglied

phzu

Neues Mitglied

Cheffchen

Senior HTML'ler

creme

Neues Mitglied

Anhänge

creme

Neues Mitglied

Tronjer

Senior HTML'ler

creme

Neues Mitglied

Tronjer

Senior HTML'ler

creme

Neues Mitglied

Tronjer

Senior HTML'ler

creme

Neues Mitglied

creme

Neues Mitglied

Tronjer

Senior HTML'ler

creme

Neues Mitglied

efwe

Mitglied

creme

Neues Mitglied

Neueste Beiträge