php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit
2-spaltiges Layout 2-spaltiges Layout
Wiki Registrieren Grundlagen Suchen Heutige Beiträge Alle Foren als gelesen markieren

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 09.11.2006, 20:11  
Erfahrener Benutzer
 
Registriert seit: 03.07.2003
Beiträge: 292
PHP-Kenntnisse:
Fortgeschritten
dh1sbg
Standard 2-spaltiges Layout
Hallo!

ich möchte dieses Layout nachbauen
PHP-Code:
<table>
 <tr>
    <td>logo</td><td>top</td>
 </tr><tf>
    <td>left</td><td>inhalt</td>
</tr>
<table> 
Dazu habe ich nun das erstellt

PHP-Code:
<span id="Seite">
<span id="logo">[img]images/logo.jpg[/img]</span>
<span id="left">links
links
links
links
</span>
<span id="top">text text text text </span>
<span id="inhalt">Inhalt</span>
</span> 
mit diesen CSS Angaben (ziemlich abgespeckt)

Code:
body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
}
  span#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0.5em;
    border: 1px ridge silver;
  }
  html>body div#Seite {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }
  span#logo {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    border: 1px ridge silver;
  }
  span#top {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    border: 1px ridge silver;
  }
  span#links {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    border: 1px ridge silver;
  }
  span#Inhalt {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    border: 1px ridge silver;
  }
Ich habe mit postion gespielt, aber irgendwie bekomme ich das Layout noch nicht hin.

Kann mir jemand auf die Sprünge helfen, damit das ähnlich wie im o.g. Table - Layout aussieht?

Irgendwo habe ich noch nicht verstanden, wie ich z.B. #top neben das Bild plaziere und den Inhalt von der Bildbreite abhängig mache.

Danke für jede Unterstützung

Bruno
dh1sbg ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 09.11.2006, 20:26  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard
statt span benötigst du div-tags, denn es sind ja blockelemente die du darstellen willst. diese kannst du dann mit float und clear frei anordnen.
nikosch ist offline   Mit Zitat antworten
Alt 09.11.2006, 21:26  
Erfahrener Benutzer
 
Registriert seit: 03.07.2003
Beiträge: 292
PHP-Kenntnisse:
Fortgeschritten
dh1sbg
Standard
Danke Nikosch!

mit
<div id="Seite">
<div id="logo">[img]images/logo.jpg[/img]</div>
<div id="top">toptoptoptoptop
top
top</div>

<div id="links">links
links
links
links
</div>
<div id="inhalt">Inhalt</div>
</div>

und
div#logo {
float: left;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
border: 10px ridge silver;
}
div#top {
float:left;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
border: 10px ridge silver;
}
div#links {
clear:left;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
border: 5px ridge silver;
}
div#inhalt {
float:left;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
border: 5px ridge silver;
}

klappt recht gut - nur dass der Inhalt nicht neben LINKS liegt. Warum aber?

Bruno
dh1sbg ist offline   Mit Zitat antworten
Alt 09.11.2006, 22:05  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard
wirklich eigenartig. bin da leider auch noch nicht son crack. habs nur so hinbekommen:
Code:
<style>
div#logo {
float: left;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
border: 10px ridge silver;
}
div#top {
float:left;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
border: 10px ridge silver;
}
div#Seite {
clear:left;
}
div#links {
float:left;
width:200px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
border: 5px ridge silver;
}
div#inhalt {
float:left;
width:200px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
border: 5px ridge silver;
} 
</style>


<div id="logo">[img]images/logo.jpg[/img]</div>
<div id="top">toptoptoptoptop
top
top</div>

<div id="Seite">
<div id="links">links
links
links
links
</div>
<div id="inhalt">Inhalt</div>
</div>
nikosch ist offline   Mit Zitat antworten
Alt 10.11.2006, 06:17  
Erfahrener Benutzer
 
Registriert seit: 03.07.2003
Beiträge: 292
PHP-Kenntnisse:
Fortgeschritten
dh1sbg
Standard
Hallo Niko,

genau, mich wundert, das das klammernde div="Seite", das ja das Layout grundsätzlich bestimmt, erst unten angelegt werden darf.

clear:left; soll doch den Fluss von Boxen, die nebeneinander rechts stehen, unterbrechen.

Entweder ich verstehe "clear:left;" nicht, oder da ist eine Unsauberkeit bei der Implementierung?

Grüße Bruno
dh1sbg ist offline   Mit Zitat antworten
Alt 10.11.2006, 11:53  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard
ja, aber wahrscheinlich in unserer. gibt bestimmt n paar div box experten hier, die bescheid wissen.
clear:left; funktioniert ja, nur das floating:left der letzen box nicht. hab auch schon ne feste breite zugewiesen, war dasselbe...
nikosch ist offline   Mit Zitat antworten
Alt 13.11.2006, 11:10  
Erfahrener Benutzer
 
Registriert seit: 23.08.2007
Beiträge: 1.510
M3g4Star befindet sich auf einem aufstrebenden Ast
Standard
PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

    <title>Titel</title>

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

    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <meta name="generator" content="Webocton - Scriptly" />

</head>

<style type="text/css">
body {
 text-align:center;
}
div#Seite {
 width: 600px;

}
 div#logo {
background-color:#FFcccc;
float: left;
width:200px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
}
div#top {
background-color:#FFFFcc;
float:left;
width: 400px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */

}
div#links {
background-color:#FFccFF;
float:left;
width: 200px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */

}
div#inhalt {
background-color:#CCFFcc;
float:left;
width:400px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */

}

</style>

<body>
<div id="Seite">
<div id="logo">[img]images/logo.jpg[/img]</div>
<div id="top">toptoptoptoptop
top
top</div>
<div id="links">links
links
links
links
</div>
<div id="inhalt">Inhalt</div>
</div>

</body>

</html> 
Habs nur schnell ein bischen umgeschrieben .. Mit Fixen breiten etc. Kannst dir ja ändern wie du magst ^^
M3g4Star ist offline   Mit Zitat antworten
Alt 13.11.2006, 13:52  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard
hab den quellcode v. oben noch angepaßt:
- css vereinfacht
- zentrierung auch für firefox

PHP-Code:
<?php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

    <title>Titel</title>

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

    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <meta name="generator" content="Webocton - Scriptly" />

</head>

<style type="text/css">
body {
text-align:center;
}
div#Seite {
width: 600px;
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
text-align:left;
}
div#logo {
background-color:#FFcccc;
float: left;
width:200px;
}
div#top {
background-color:#FFFFcc;
float:left;
width: 400px;
}
div#links {
background-color:#FFccFF;
float:left;
width: 200px;
}
div#inhalt {
background-color:#CCFFcc;
float:left;
width:400px;
}

</style>

<body>
<div id="Seite">
<div id="logo">[img]images/logo.jpg[/img]</div>
<div id="top">toptoptoptoptop
top
top</div>
<div id="links">links
links
links
links
</div>
<div id="inhalt">Inhalt</div>
</div>

</body>

</html>
nikosch ist offline   Mit Zitat antworten
Antwort

« Ajax und Sonderzeichen? | div ohne Zeilenumbruch »

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
css layout frage HTML, Usability und Barrierefreiheit 1 23.02.2006 20:56
[Erledigt] Problem mit Layout bei Firefox HTML, Usability und Barrierefreiheit 3 14.11.2005 15:42
Problem mit CSS Layout HTML, Usability und Barrierefreiheit 5 15.10.2005 21:46
[Erledigt] Probleme bei Fehlerausgabe und bei Layout PHP Tipps 2005-2 3 01.10.2005 09:26
Trennung von Layout und Code (Tutorial?) PHP Tipps 2005-2 2 21.06.2005 17:14
[Erledigt] Layout mit CSS - Habe Problem HTML, Usability und Barrierefreiheit 3 10.05.2005 17:28
[Erledigt] &lt;div&gt; layout funtzt nicht!! HTML, Usability und Barrierefreiheit 7 20.04.2005 19:10
css layout prob imported_dex HTML, Usability und Barrierefreiheit 4 19.04.2005 19:19
Layout - mit oder ohne? TRW HTML, Usability und Barrierefreiheit 12 07.03.2005 00:29
[Grafiker] individuelles Layout für vBulletin imported_Ben Beitragsarchiv 3 10.02.2005 13:28
Layout mittels DIV und CSS HTML, Usability und Barrierefreiheit 4 21.12.2004 13:02
Layout alt gegen Neu :) themonk Off-Topic Diskussionen 65 26.10.2004 13:53
[Erledigt] Haupt Layout erzeugen PHP Tipps 2004 10 17.08.2004 16:00

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
2 spaltiges layout, 2 spaltiges div layout, 2 spaltiges div, 2-spaltiges layout, php 2 spaltiges layout, 2 spaltiges layout div, 2 spaltiges layout php, 2 spaltiges css layout, 2spaltiges layout div, text 2 spaltig php, 2 spaltige divs, 3 spaltiges css layout zentriert, 2 spaltiges div zentrieren, 2spaltiges div layout, html css 2 spaltiger textfluss, 2 spaltiger div, 2spaltiges layout mit div, div 2 spaltig, 2spaltiges layout php, webocoton box zentrieren

Alle Zeitangaben in WEZ +2. Es ist jetzt 02:45 Uhr.

php.de - Das deutsche PHP-Forum - Kontakt - Impressum - Forenregeln - Archiv - Nach oben



Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum

Creative Commons License
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.