✔ design einer content box zum includen

Status
Nicht offen für weitere Antworten.
O

Otianer

Mitglied
Hallo Zusammen,

ich habe folgendes Problem und zwar will ich ne css Datei für eine contentbox schreiben die ich immer include und die ein leit auswechselbares design per css haben soll da ich damit modemarken darstelle leider hab ich nich wirklich den plan von CSS die Grundlagen kenn ich aber so das spezifische zu wissen wann jetzt was wo ist oder wenn es nich so ist was ich ändern muss das hab ich nich drauf würde mich freuen wenn mir wer helfen könnte fürge ein bild des vorgesehenen designs hinzu

EDIT: das ganze ist in einem Content <div> und diese soll ein background aus nem bild haben
 

Anhänge

  • ansicht.JPG
    ansicht.JPG
    20,9 KB · Aufrufe: 29
Zuletzt bearbeitet:
Hi,

und wobei sollen wir dir nun konkret helfen?

Wenn du auf der Suche nach Anleitungen und Beispiele für CSS-Layouts bist, empfehle ich dir zum Einstieg diese Ressourcen:

  1. andreas kalt.de: Ein CSS-Layout erstellen
  2. barrierefrei.e-workers.de: Workshop - temp
  3. CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
  4. css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
  5. intensivstation :: CSS Templates :: Templates
  6. ironmyers.com | CSS Layouts
  7. selfHTML: CSS-basierte Layouts
  8. Stichpunkt CSS: Layout ohne Tabellen
  9. stu nicholls | CSS PLaY | CSS layouts
  10. Web Design References: Cascading Style Sheets
Was letztlich mit dem DIV geschieht, also ob es einen statischen oder dynamischen Inhalt per include erhält, ist bei der CSS-Formatierung zweitrangig.

mfg Maik
 
Danke für die antwort,

ich hab mir die Seiten angesehen aber da is nichts dabei was mir hilft :-( undzwar hab ich nun folgendes probiert durch die seiten gefundene snippeds:

HTML: 
div.content
{
background: url('../bilder/bg.png');
width:570px; 
}

span.bilderl{
	float: left;
	width:100px;
	margin-left: 0px;
}

span.bilderr{
	float: right;
	width:100px;
	margin: 0,0,0,0;
}

span.textl{
	padding-top: 0;
	width: 465px;
	float: left;
	text-align: justify;
	border: 1;
	border-color: Black Black Black Black;
}

span.textr{
	float: right;
	width: 465px;
	text-align: justify;
	border: 1px solid Aqua;
	white-space: normal;
}

und das so eingebunden:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="content">
  <span class="bilderl"><img src="bilder/bspl.png"></span>
  <span class="textr">test</span>
</div>
  
</body>
</html>

problem jetzt ist, das die divbox nich den hintergrund anzeigt, und das sich die schrift keinen umbruch macht wenn sie die maxlänge von 465px errecht hat in der textklasse.
Was mache ich da falsch ich verstehe es nicht :-(
 
Nach noch nicht mal 15 Minuten hast du alle zehn genannten Seiten besucht, die Tutorials gelesen und Beispiele studiert? :suspekt:

Zu deinem Problem mit dem Hintergrund:

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Lösung im vorliegenden Fall:

Code: 
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
Code: 
<div class="content clearfix"> ... </div>

Was den Textumbruch betrifft, kann ich da keine Probleme feststellen, solange die Zeichenkette auch Leerzeichen enthält, an denen sich der Browser für einen Zeilenumbruch orientieren kann.

Ansonsten müsstest du den zu langen Textstring mit einer Scriptsprache "beschneiden".

mfg Maik
 
danke nochmals :-),

jedoch besteht das problem mit dem hintergrund nochimmer er wird nich gezeigt das mit dem clear klappt anscheinend bei mir nicht oder ich habe es falsch eingebunden, oder es ist browser abhängig ich benutze firefox 3.0 BETA 5 und im IE sehe ich es auch nicht.

HTML: 
div.content
{
background: url('../bilder/bg.png');
width:570px; 
}

span.bilderl{
	float: left;
	width:100px;
	margin-left: 0px;
}

span.bilderr{
	float: right;
	width:100px;
	margin: 0,0,0,0;
}

span.textl{
	padding-top: 0;
	width: 465px;
	float: left;
	text-align: justify;
	border: 1;
	border-color: Black Black Black Black;
}

span.textr{
	float: left;
	width: 465px;
	text-align: justify;
	border: 1px solid Aqua;
	white-space: normal;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

seiten quelltext:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="content" class="clearfix">
  <span class="bilderl"><img src="bilder/bspl.png"></span>
  <span class="textr">jl-k lökj löj lökj öl jo i ölj oi ö nköj höl nk hg jkg gk jhg kjhg kj gjk gjk g jkg kjg jk g kjgj kg kjg kjg kj gjk gk jg kjhg kjg kj gkj gh kjg kj gjk g kjg khg kj gj kgjg</span>
</div>
  
</body>
</html>

zum thema zeilenumbruch war mein fehler hab immer nur ne lange zeichenabfolge hinein geschrieben.
 
Dann schau dir bitte nochmal meinen HTML-Code zum Aufruf der Klasse .clearfix an.

Achja, vernachlässige bitte in deinen Beiträgen die Groß- und Kleinschreibung nicht ;)

mfg Maik
 
tut mir gnz ehrlich leid aber das checke ich nicht mit dem clear und so kann auch deiner seite nichts entnehmen was mir hilft sry evtl kannste mir das ja netterweise Erklären:-)
 
Lesen kannst du aber, oder?

Code: 
<div class="content clearfix"> ... </div>
mfg Maik
 
oh achso hehe *schäm* da hab ich nich drauf geachtet :-( tut mir leid :-)^^

EDIT: okay klappt vielen dank das du auch meine verchecktheit ausgehalten hast :-D
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück