HTML Bild in HTML "umwandeln"

[Cool Master]

Moin,

also ich habe ein kleies Problem. Ich möchte 2 Bilder in HTML/CSS umwandeln. Und zwar sind es diese Bilder:

http://ving.bw.fh-kl.de/Grafik/Studieninhalte_Grundstudium

http://ving.bw.fh-kl.de/Grafik/Studieninhalte_Vertiefung

Liegt daran das die Seite bald auf ein CMS umgestellt wird und zwecks Indexing und SEO sollte es Text sein.

Mein problem ist gerade ich steh auf dem Schlauch was die Orangen Trennlinien angeht. Den Text mache ich per Unordered List. Frage ist jetzt nur wie bekomme ich die Trennlinen am besten hin?

Kann ich das ganze in ein <span> setzen und mit bordern arbeiten? oder gibt es da was besseres?

Grüße,

Cool Master

 

[Turas]

Eine Tabelle mit Rahmen vielleicht?

 

[Cool Master]

Tabellen möchte ich vermeinden zwecks Barrierefreiheit.

 

[Amr0d]

Eine Tabelle die du mit CSS etc. einfach gestaltest.

im CSS heißt das glaube ich: border-color: #000 1px solid

Dann wäre der Rand in diesem Fall schwarz 1px dick und in einem Stück wie auf dem Bild.

Ergänzung (7. Februar 2012)

Zwecks Barrierefreiheit nimmst du dann einfach <div> Rahmen

Schade das ich keinen Joda Avatar habe ^^

 

[Rossie]

Wie weit bist Du denn bereits mit der Implementierung? Wenn Du die zweispaltige Anordnung der Boxen bereits hast, ist es doch denkbar einfach, den Rand der beiden ersten entsprechend zu stylen. Ich würde nicht extra ein spezielles Tag zur Formatierung verwenden, sondern jede Box in <p>-Tags einschließen und entsprechende Style-Klassen verwenden.

 

[Da Biggy]

Hätte auch ne Tabelle vorgeschlagen mit den Linien, Vertikale Striche kenne ich als TAG gar nicht...

 

[Laci69]

Auf die schnelle:

<table border="0" style="border-collapse: collapse;">
<tr>
<td valign="top" style="height: 230px; width: 230px; border-right: 1px solid orange; border-bottom: 1px solid orange;">
Semester...blablabla
</td>
<td valign="top" style="height: 230px; width: 230px; border-bottom: 1px solid orange;">
ioio
</td>
</tr>
<tr>
<td valign="top" style="height: 150px; width: 230px; border-right: 1px solid orange; border-bottom: 1px solid orange;">
Semester...blablabla
</td>
<td valign="top" style="height: 150px; width: 230px; border-bottom: 1px solid orange;">
ioio
</td>
</tr>
<tr>
<td valign="top" style="height: 150px; width: 230px; border-right: 1px solid orange;">
Semester...blablabla
</td>
<td valign="top" style="height: 150px; width: 230px;">
auf die schnell
</td>
</tr>
</table>

 

[Amr0d]

Is hier geheimes Joda HTML Treffen? Nimm einfach <div>'s damit dürftest du am wenigsten Probleme haben.

 

[Laci69]

<div style="border-right: 1px solid orange; border-bottom: 1px solid orange; height: 200px; width: 230px; position: relative; float: left;">
semester---blablabla
</div>
<div style="border-bottom: 1px solid orange; height: 200px; width: 230px; position: relative; float: left;">
pkojk
</div>
<div style="border-right: 1px solid orange; border-bottom: 1px solid orange; height: 150px; width: 230px; position: relative; float: left;clear: both;">pkojk</div>
<div style="border-bottom: 1px solid orange;height: 150px; width: 230px; position: relative; float: left;">pkojk</div>
<div style="border-right: 1px solid orange; border-bottom: 1px solid orange; height: 180px; width: 230px; position: relative; float: left;clear: both;">pkojk</div>
<div style="border-bottom: 1px solid orange; height: 180px; width: 230px; position: relative; float: left;">pkojk</div>

 

[Amr0d]

So und das CSS packste dann noch in eine seperate Datei und dann ist doch alles perfekt

 

[Cool Master]

Laci69

so hatte ich es als 1. gedacht aber bei meiner letzen frage hieß es das so eine DIV suppe nicht so super ist.
Aber egal solange es in jedem Browser so passt ist es ja egal wie der Code dahinter aussieht.

Dank euch für euren Input.

 

[Amr0d]

Wenn du das CSS aussortierst und in eine eigene Datei packst hast du gar nicht mehr eine so große "DIV Suppe". Dazu kommt das es ja eigentlich völlig unwichtig ist bei den paar Zeilen.

 

[Domi_bas]

eben, es kommt halt auf die Ordnung an:

<style type="text/css">
body {
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
}

p {
	padding:5px;
	margin:0;
}

ul {
	list-style:square #FF6C00;
	margin:0 0 0 12px;
	padding:5px;
}

li {
	padding:0;
	margin:0;
}

h1 {
	font-size:14px;
	margin:0;
	line-height:14px;
	padding:5px;
}

div#tabelle_ohne_table {
	width:497px;
	height:418px;
	margin:0px auto;
	padding:0;
}
div.tr_o {
	height:33%;
	padding:0;
	margin:0;
}
div.tr_m {
	height:31%;
	padding:0;
	margin:0;
	border-bottom:1px #FF6C00 solid;
	border-top:1px #FF6C00 solid;
}
div.tr_u {
	height:33%;
	padding:0;
	margin:0;
}
div.td_l {
	float:left;
	width:50%;
	height:100%;
	padding:0;
	margin:0;
	border-right:1px #FF6C00 solid;
}
div.td_r {
	float:left;
	width:50%;
	height:100%;
	padding:0;
	margin:0;
}

.clear {
	clear:both;
	height:0;
	width:0;
	margin:0;
	padding:0;
}

</style>

</head>

<body>

<div id="tabelle_ohne_table">

	<div class="tr_o">
    	<div class="td_l">
            <p>Normaler Text oben</p>
            <h1>Überschrift</h1>
            <p>Inhalte:</p>
            <ul>
                <li>1. Punkt</li>
                <li>noch einer</li>
                <li>nochmal ein Aufzählungspunkt</li>
            </ul>            
        </div>
        <div class="td_r">
        	<p>Normaler Text oben</p>
            <h1>Überschrift</h1>
            <p>Inhalte:</p>
            <ul>
                <li>1. Punkt</li>
                <li>noch einer</li>
                <li>nochmal ein Aufzählungspunkt</li>
            </ul>            
        </div>
        <div class="clear"></div>
    </div>
    <div class="tr_m">
    	<div class="td_l">
            <p>Normaler Text oben</p>
            <h1>Überschrift</h1>
            <p>Inhalte:</p>
            <ul>
                <li>1. Punkt</li>
                <li>noch einer</li>
                <li>nochmal ein Aufzählungspunkt</li>
            </ul>
        </div>
        <div class="td_r">
        	<p>Normaler Text oben</p>
            <h1>Überschrift</h1>
            <p>Inhalte:</p>
            <ul>
                <li>1. Punkt</li>
                <li>noch einer</li>
                <li>nochmal ein Aufzählungspunkt</li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div class="tr_u">
    	<div class="td_l">
            <p>Normaler Text oben</p>
            <h1>Überschrift</h1>
            <p>Inhalte:</p>
            <ul>
                <li>1. Punkt</li>
                <li>noch einer</li>
                <li>nochmal ein Aufzählungspunkt</li>
            </ul>
        </div>
        <div class="td_r">
        	<p>Normaler Text oben</p>
            <h1>Überschrift</h1>
            <p>Inhalte:</p>
            <ul>
                <li>1. Punkt</li>
                <li>noch einer</li>
                <li>nochmal ein Aufzählungspunkt</li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

</div>

</body>

HAb mir die Mühe gemacht das zu tippen und in der zwischenzeit waren andere schneller. Aber ich möchte es trotzdem loswerden!

 

[Rossie]

<div>s sind nicht schön. Ich würde sie vermeiden, wenn es geht, was hier ja kein Problem wäre.

 

[Amr0d]

Sind nicht schön? Mit welcher Begründung denn?

 

[Rossie]

Sie bedeuten in diesem Fall Overhead. Der einzige Sinn besteht darin, die CSS-Anweisungen unterzubringen. Die kann man aber auch direkt an ohnehin vorhandene Tags hängen.

In diesem Fall bietet sich das <p>-Tag doch geradezu an, wenn ich davon ausgehe, dass die verschiedenen Blöcke damit eingefasst sind - geht es hier doch gerade um Barriefreiheit. Ein <div> hat keine inhärente Bedeutung, ein <p> schon.

 

[Domi_bas]

Bin jetzt zwar kein HTML/CSS Profi mit Studium o.ä. aber für das was du vorhast kannst/solltest du
keine <p> nehmen.

Diese sind als Absätze (p = paragraph) definiert, also nur um Text zu fassen.
Um die Anordnung im "Raum" genau hinzubekommen sind divs (div = division = bereich) die erste Wahl. Wenn du Border o.ä. verwenden willst und in dem Fall auch musst kommst du daran nicht vorbei, auch wenn du sie nicht magst.

schau dir das mal ein paar Minuten an: http://de.selfhtml.org/html/text/index.htm

 

[Rossie]

Es braucht schlicht und einfach kein <div>, um die Anordnung hinzukommen. Das lässt sich wunderbar direkt dem <p> sagen. Man "überschreibt" einfach dessen Standardverhalten.

<div> oder <span> Tags würde ich nur nehmen, wenn es gar nicht anders geht.

 

[Amr0d]

Ich behaupte nicht die Aussage von soares falsch ist aber gelernt habe ich es auch so wie Domi_bas, deswegen auch die Frage warum p statt div

 

[Domi_bas]

Divobie???