Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Div Border?“

saint44

Schlingel

hey
ich habe mir mal ein css design runtergeladen um im quellcode css und divs zu lernen...alles läuft super.. endlich habe ich mal das prinzip von divs verstanden aber eine frage:

man sieht ja, dass um jeden div so ein weißer rand is. wie bekomme ich das hin? ich ahbs schon mit border und den ganzen atrributen probiert aber passiert nicht soviel bzw. das richtige
hier der html code:
HTML:
<div id="container">

<div id="banner">
<div id="bannerLeft"></div>
<div id="bannerRight">
<h1>Mandarin :.</h1>
<h2>The Free CSS Template with an Orange Background.</h2>
</div>
</div>

<div id="content">

<div id="leftColumn">
<ul id="nav">
<li><a href="index.html">&raquo; Home</a></li>

</ul>
<div id="leftColumnBottom">
<p>FYI the image above the navigation bar should be sized 100h x 150w.</p>
<p>Feel free to do whatever you want with this template. Just be sure to leave my link/credit at the bottom. Thanks!</p>

</div>
</div>

<div id="rightColumn">
<h3>This is a Header <span class="date">12.28.06 // Comments (3)</span></h3>
<p>Lorem....</p>

<h3>This is a Header <span class="date">12.24.06 // Comments (0)</span></h3>
<p>Lorem..</p>

<h3>This is a Header <span class="date">12.06.06 // Comments (1)</span></h3>
<p>Loorem...</p>
</div>

<div id="clear">
</div>

</div>

</div>
css:
Code:
/* CSS Template by gorotron */

body {
    background-image:url(bg1b.gif);
    background-repeat:repeat-x;
    background-color:#FC3;
    margin:20px;
    padding:0;
    text-align:center;
}

h1 {
    font-size:24px;
    color:#FFF;
    font-weight:700;
    margin:0;
}

h2 {
    font-size:10px;
    color:#F90;
    margin:0;
    font-weight:700;
}

h3 {
    font-size:16px;
    color:#369;
    font-weight:700;
    margin:0;
    padding-bottom:5px;
    [COLOR=Red]border-bottom:1px dotted #CCC;[/COLOR] [COLOR=Red]<--- ???
}[/COLOR]

p {
    margin-top:5px;
    padding-bottom:5px;
    font-size:11px;
    line-height:1.5em;
}

#container {
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    margin:0 auto;
    width:700px;
    padding:10px;
    height:auto;
    background-color:#FFF;
    text-align:left;
}

#banner {
    width:700px;
    height:100px;
    margin-bottom:10px;
}

#bannerLeft {
    width:150px;
    height:100px;
    margin-right:10px;
    background-image:url(leaf.gif);
    float:left;
}

#bannerRight {
    width:529px;
    height:49px;
    background:url(bg1c.gif) repeat-x;
    float:left;
    border:1px solid #CCC;
    border-width:1px 0 0 1px;
    padding:50px 0 0 10px;
}

#content {
    background:url(bg1.gif) repeat-y;
    height:1%;
    }

#leftColumn {
    float:left;
}

#nav {
    margin:0;
    padding:0;
    list-style:none;
}

#nav a {
    display:block;
    font-size:11px;
    color:#F90;
    text-decoration:none;
    padding:10px;
    width:130px;
    height:10px;
    border-bottom:1px dotted #333;
    
}

#nav a:hover {
    background-color:#333;
}

#leftColumnBottom {
    width:130px;
    background:url(bg1c.gif) repeat-x;
    padding:110px 10px 10px;
    color:#EAEAEA;
}

#rightColumn {
    float:left;
    width:530px;
    padding-left:20px;
    color:#666;
}

#clear {
    clear:both;
}

.date {
    font-size:10px;
    color:#999;
    font-weight:normal;
}

#copyright {
    padding-top:10px;
    font:10px Arial,Helvetica,sans-serif;
    color:#369;
}

#copyright a {
    text-decoration:none;
    color:#369;
}

#copyright a:hover {
    color:#F39;
}
das würde ich gerne wissen dann lass ich euch inruhe :D

danke schonmal :D
 

Joddasz

Noch nicht viel geschrieben

AW: Div Border?

Ich würde einfach ein weißes Div im Hintergrund erstellen und dann die drei, bzw, vier Divs da reinsetzen, mit entsprechendem Abstand zum Rand und zu den anderen Divs. Hab den Code nicht gelesen, aber ich glaube das ist die einfachste Lösung und so sieht das Design auch aus, was du da gepostet hast.

Den äußeren Abstand zu anderen (Div-) Elementen stellt man mit margin (-bottom, -top, -left, -right) ein.
Den Abstand zu Elementen im Inneren eines Divs mit padding.

Wurde hier auch gemacht:

#bannerLeft {
width:150px;
height:100px;
margin-right:10px;
background-image:url(leaf.gif);
float:left;
}
Jetzt hab ich doch ein bischen Quelltext gelesen :)
 
Zuletzt bearbeitet:

Duststorm

Webdesigner oder so...

AW: Div Border?

Hallo,
Wie joddasz schon sagte: Ein Hintergrund Div und die anderen dort rein setzten. Mit "Padding" auf ca. 8 kannst du das ergebnis erzielen.
 

saint44

Schlingel

AW: Div Border?

bei mir hauts irgentwie nicht hin:



code:

Code:
/* CSS Document */
.Stil2 {color: #FFFFFF}
.Stil1 {color: #FF6600}

body {
    background-image:url(bg1b.gif);
    background-repeat:repeat-x;
    background-color:#FC3;
    margin:20px;
    padding:0;
    margin-right:10px;
    
}

#header {
    width:700px;
    height:100px;
    background-image:url(bg1c.gif);
    border:#FFFFFF;
    margin-bottom:10px;
    margin-left:10px;




}

#leaf {
background-image:url(leaf.gif);
width:150px;
height:100px;
float:left;
margin-right:10px;

}

#container {
background-color:#FFFFFF;
width:850;
}
 

vanilladragon

Pixelmonster

AW: Div Border?

Erst einmal:
border-bottom: 1px dotted #CCC;

Ist die gepunktete (dotted) Linie, die unter den Überschriften ist.


Außerdem ist es dein Fehler, dass du "margin" benutzt. Das ist falsch! Du musst padding benutzen. Anscheinend doch nicht so ganz verstanden ;-).

vanilla
 

saint44

Schlingel

AW: Div Border?

aber dann wkommt kein weißer rahmen, sondern das blatt bzw. die stipes bilden einen neuen rand obwohl ich border-color:#FFFFFF;
angegeben habe
 

Joddasz

Noch nicht viel geschrieben

AW: Div Border?

Ich weiss, solche Antworten sind immer gerne gesehen, aber ich hab mir das Layouten mit Divs mit diesem Tutorial beigebracht:

CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen

Hier gibts bestimmt auch gute Tutorials dazu, aber ich bin noch zu neu hier, umzu wissen, welches gut ist. Rumprobieren verleitet immer sehr, aber frustet auch schnell.

P.S.: was auch wichtig ist beim Coden mit Divs ist der Befehl float.
 
Zuletzt bearbeitet:

Joddasz

Noch nicht viel geschrieben

AW: Div Border?

Sehr gerne, ich hoffe sie hilft.
Als Tipp noch: selfhtml.net
Auch eine sehr ausgiebige Ressource für HTML und CSS
 
Zuletzt bearbeitet:

speedcu

Noch nicht viel geschrieben

AW: Div Border?

hy!
also ein heißer tipp is mal firebug! der hilft dir sehr beim entwickeln! einfach auf der firefoxseite als plugin runterladen. du kannst da drin auch gleich am CSS rumschrauben und siehst gleich die auswirkungen, das is zum rumprobieren und entwickeln optimal!

wenn ich das beim überfliegen von deinem quellcode jetzt richtig gesehn hab, könnts daran liegen: zwischen deinem grünen und schwarzen banner oben is deshalb kein abstand, weil du beim schwarzen banner zu wenig margin hast! wenn du einen float angibst, dann musst du beim margin noch mal die breite von deinem grünen banner angeben, damit der schwarze daneben ist. allerdings achtung: IE6 interpretiert das falsch, IE7 weiß i jetzt net genau ob der das scho kann, IE8 machts richtig.

grundsätzlicher tipp: entwickle zuerst auf firefox und schreib dann die hacks im IE. firefox interpretiert quellcode am besten!

dein grüner banner is deshalb rundherum net weiß weil du nur margin-bottom angegeben hast. lass das bottom weg.

alternativ könntest natürlich auch einfach mit border arbeiten, den du aber halt um die objekte geben muss, die einen rand haben sollen.

wie hier schon erwähnt wurde h3 is eine überschrift. willst du einen rand um die banner musst, das eben dort eingeben.

hoff ich konnte ein bisschen helfen :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben