nicht angemeldet
Zum x-ten Mal: Verzicht auf Tabellen
Moin!
Ich habe ein nettes Visitenkartenlayout als HTML + CSS unter Verzicht auf Layout-Tabellen umsetzen wollen.
Ich bin daran verzweifelt, habe resigniert und das nun wie folgt gelöst. Vielleicht kann mir hier jemand auf die Sprünge helfen, wie ich das dennoch hätte lösen können.
Hier die Randbedingungen, die ich einhalten sollte:
1. Oben und unten 1px Rand über die Visitenkartenbreite
2. In der Mitte 1px Strich zwischen der linken und rechten Hälfte
3. Der Strich soll 7px Abstand sowohl zum oberen als auch unterem Rand haben
4. Die Telefonnummerntabelle (hier ist eine Tabelle gerechtfertigt, denke ich, soll unterhalb des Logos starten. Vorausgestzt natürlich, die eingestellte Zeichengröße gibt das her. Ansonsten natürlich erst unterhalb von Namen und Titel und Funktion.
Hier mein Code:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<title>visitenkarte für mich erstellt am 16.januar 2006</title>
<style type="text/css">
<!--
.my-vk {
float:left;
clear:both;
border-width:1px 0px 1px 0px;
border-color:#0859a0;;
border-style:solid;
margin:4px 0px 4px 0px;
}
.my-vk table {
border-collapse:collapse;
text-decoration:none;
background-color:white;
font-family: arial, helvetica, verdana, geneva, sans-serif;
font-size:small;
border:0px;
padding:0px;;
margin:0px;
}
.my-vk .vc {
border-width:7px 0px 7px 0px;
border-color:white;;
border-style:solid;
}
.my-vk .left {
border-color: #0859a0;
border-style:solid;
border-width:0px 1px 0px 0px;
padding-right:10px;
}
.my-vk .right {
border-color: #0859a0;
border-style:solid;
border-width:0px;
border-width:0px 0px 0px 1px;
padding-left:10px;
}
.my-vk .headquarter {
color:black;
vertical-align:bottom;
}
.my-vk .user, .my-vk .personal, .my-vk .phones {
color:#0859a0;
}
.my-vk img, .my-vk .phones {
margin:0px;
padding:0px;
border:0px;
}
.my-vk .type, .my-vk .country, .my-vk .local, .my-vk .number {
padding:0px 2px 1px 2px;
border:0px;
}
.my-vk td {
vertical-align:top;
}
.my-vk a:link, .my-vk a:visited, .my-vk a:focus, .my-vk a:hover, .my-vk a:active {
color: #0859a0;
text-decoration:none;
}
.my-vk p {
margin:1px;
}
-->
</style>
</head>
<body bgcolor="#ffffff" text="#000000">
<div class="my-vk">
<table class="vc">
<tbody>
<tr class="main">
<td class="logo left">
<a href="http://www.myconnect.de">
<img src="logo.gif" alt="myconnect ag" width="155" height="49"/>
</a>
</td>
<td class="user right">
<p class="name" >skeeve</p>
<p class="title">diplom verwirrer</p>
<p class="job" >master of chaos</p>
</td>
</tr>
<tr class="contactinfo">
<td class="headquarter left">
<p>myconnect gmbh</p>
<p>stadttor 14</p>
<p>d-40219 duesseldorf</p>
<p>germany</p>
</td>
<td class="personal right">
<table class="phones">
<tbody>
<tr class="phone">
<td class="type" />office </td>
<td class="country" />+49 </td>
<td class="local" />211 </td>
<td class="number" />123456 </td>
</tr>
<tr class="phone">
<td class="type" />mobile </td>
<td class="country" />+49 </td>
<td class="local" />211 </td>
<td class="number" />123457 </td>
</tr>
<tr class="phone">
<td class="type" />fax </td>
<td class="country" />+49 </td>
<td class="local" />211 </td>
<td class="number" />123458 </td>
</tr>
<tr class="phone">
<td class="type" />private </td>
<td class="country" />+49 </td>
<td class="local" />211 </td>
<td class="number" />123459 </td>
</tr>
</tbody>
</table>
<p><a href="http://www.gibt's.net/">www.gibt's.net</a></p>
<p><a href="mailto:mich@gibt's.net">mich@gibt's.net</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
-- Skeeve
-
Hallo,
Hier mein Code:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">Entschuldige, dass ich nicht näher auf den Rest des Themas eingehe, aber hier liegt ein schwerwiegender Fehler, der sich auf alles andere Auswirkt.
1. Bei der Doctypeangabe ist das, was innerhalb der Zollzeichen (") steht case-sensitiv, d.h. die Groß- und Kleinschreibung spielt eine Rolle.
2. Ein Transitional-Doctype *ohne* URI-Angabe versetzt alle Browser in den Ratemodus.
Die URI kannst du nur bei Angabe eines Strict-Doctypes weglassen.Wenn du diese beiden Punkte beachtest kannst du die Browsern in den standardkonformen Modus versetzten. Dann halten sich diese so nah an den Webstandards wie möglich und dir sollte das Erstellen von CSS-basierten Designs weniger Schwirigkeiten bereiten.
Gruß;
-
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">Entschuldige, dass ich nicht näher auf den Rest des Themas eingehe, aber hier liegt ein schwerwiegender Fehler, der sich auf alles andere auswirkt.
Vollkommen richtig, CSS-Layout ohne standardkonformen Modus ist verschwendete Zeit. Nur als Ergänzung: http://hsivonen.iki.fi/doctype/, als Zusatz dazu erleichtert beim Internet Explorer vor Version 7 http://dean.edwards.name/IE7/ die Arbeit ungemein.
-
Moin!
- Bei der Doctypeangabe ist das, was innerhalb der Zollzeichen (") steht case-sensitiv, d.h. die Groß- und Kleinschreibung spielt eine Rolle.
Dort steht <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Ich habe keine Ahnung, wie der Fehler hier reingerutscht ist.
-- Skeeve
-
Moin!
Ich sehe gerade: Das ist ja ALLES klein geschrieben! So war das nicht gewollt. MIST!
-- Skeeve
-