Autor |
Nachricht |
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Fr 25.04.2008 21:55
Titel Website-Layout mit css/divs umsetzen, Vorgehensweise? |
|
|
Hallo zusammen.
eine frage bezüglich des nachstehenden, stilisierten layouts.
wie erstellt man die website am sinnvollsten?!
frage 1: das menü
habe bisher n div für das menü erstellt, mit entsprechender background-farbe.
die farbigen unterteilungen (headline 2, headline 4), wie schaffe ich diese? neue divs für jede headline? ne gesamte tabelle innerhalb des menü-divs mit 5 zeilen? (headline 1 - 5)
(wie kann ich zusätzlich den weißen hintergrund von "aktueller link 1" in gezeigter breite und position ermöglichen?)
frage 2: copytext + bild
bisher wieder nur ein div für den main-content.
wie kann ich das bild am sinnvollsten einsetzen, so dass der copytext darum läuft?! tabelle (2 zeilen: links text, rechts bild; zeile2: text)? andere möglichkeiten?
die hinterlegung bei dem text: "Aut officiis debitis... etc."
wie kriege ich die hin? ebenfalls tabelle? oder einzelner div container? oh man... xD
glaub der rest ist kein problem... aber bei dieser vorgehensweise, wollt ich mal vor umsetzung nachfragen
die grundlegenden, handwerklichen sachen (wie erstelle ich den link, div-container mit hinterlegung beim hover, usw.) müsst ihr nicht erklären, die kann ich schliesslich auch noch auf diversen css sites nachlesen.. (dürft ihr aber trotzdem erklären hehe, wenn ihr langeweile habt xD)
vorwiegend gehts mir hier einfach um die vorgehensweise, um die grundlegende methodik... das "konzept" wenn man so will xD da ich doch recht selten internetsites programmieren muss..
Danke, Leute!
deliciiouzz
Zuletzt bearbeitet von deliciious am Fr 25.04.2008 22:09, insgesamt 1-mal bearbeitet
|
|
|
|
|
wipeout
Dabei seit: 20.05.2005
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Fr 25.04.2008 22:07
Titel
|
|
|
leider ist das bild etwas klein um genaues erkennen zu können. poste es mal etwas größer, dann kann man da noch besser was zu sagen und auf deinen text beziehen.
im großen und ganzen kann man das aber erstmal mit drei nebeneinander liegenden divs lösen.
im ersten div liegt halt die navi, im zweiten der copytext und im dritten die zusätzlichen infos.
um den text vernünftig darzustellen gibt es eigentlich mehrere möglichkeiten. nochmal ein div drumherum, was ich aber als umständlich empfinde (semantisch wird das wohl auch nicht der bringer sein) oder man setzt den text direkt in ein p-tag. das bild setzt du einfach ein und floatest es nach rechts...
mal quick n dirty gedacht...
zu den anderen fragen kann ich leider nichts sagen, da ich halt auf dem kleinen bild nichts erkenne
|
|
|
|
|
Anzeige
|
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Fr 25.04.2008 22:12
Titel
|
|
|
danke für die erste schnelle antwort!
bild ist editiert.. sollte nun größer sein.
die drei divs habe ich ja bisher erstellt, text und links sind drin, kein problem.
jetzt die frage bezüglich des menüs: die unterschiedlichen hinterlegungen und die hinterlegung beim aktiven link?
das mit dem bild floaten.. werde ich mal testen.
wie schafft man wiederrum die hinterlegung nur im dritten absatz (kompletter dritter absatz ist grau hinterlegt, der restliche text steht eben auf weiß).
|
|
|
|
|
wipeout
Dabei seit: 20.05.2005
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Fr 25.04.2008 22:25
Titel
|
|
|
um den text farbig zu hinterlegen könntest du dem entsprechenden p-tag eine klasse zuweisen und per css formatieren. oder du bastelst den text in einen extra div-tag...
das menü ist nicht so schwer....das solltest du als liste aufbauen und per css formatieren. ich würde ausserdem ein extra div für das menü in der linken spalte notieren und darin die liste dann platzieren.
|
|
|
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Sa 26.04.2008 15:08
Titel
|
|
|
Thx,
menü hab ich hingekriegt, thx...
und das mit dem hinterlegten absatz auch.. (wobei der rahmen dank des <p>-tags mit klasse nun wirklich knapp am absatz entlang geht und daher sehr wenig/fast keinen abstand zum text hat).
bild hat auch geklappt.. (:
was mich jetzt (wieder) zum verzweifeln bringt ist folgendes problem:
ich habe einen div container...
links am rand ausgerichtet, jedoch 100px vom oberen rand entfernt.
dieser soll jetzt 100% Höhe (von der (jeweils) gesamten Browserhöhe) einnehmen.
problem ist aber:
er nimmt die _absolute_ browserhöhe ein, als wäre er nicht 100px vom oberen rand entfernt. sprich: ich muss immer 100 px nach unten scrollen... wie kann ich das ändern? jemand einen verständlichen rat für mich? xD (:
|
|
|
|
|
wipeout
Dabei seit: 20.05.2005
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Sa 26.04.2008 17:57
Titel
|
|
|
poste den quellcode, dann kann man mehr dazu sagen
wegen dem p-tag: du kannst natürlich mal mit den padding-werten experimentieren. oder du machst halt einen extra div-tag für den hinterlegten text und passt das css an
|
|
|
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Sa 26.04.2008 18:46
Titel
|
|
|
wipeout hat geschrieben: | wegen dem p-tag: du kannst natürlich mal mit den padding-werten experimentieren. oder du machst halt einen extra div-tag für den hinterlegten text und passt das css an |
alles recht kompliziert xD für n "anfänger" mit css.. xD
ich teste nochmal rum, ansonsten frage ich hier nochmal nach
wipeout hat geschrieben: | poste den quellcode, dann kann man mehr dazu sagen
wegen dem p-tag: du kannst natürlich mal mit den padding-werten experimentieren. oder du machst halt einen extra div-tag für den hinterlegten text und passt das css an |
mhh.. der code ist jetzt reduziert auf das obige problem:
Zitat: | css:
#container_1 {
position: absolute;
left: 0px;
top: 100px;
width: 200px;
height: 100%;
border: 0px;
}
|
Zitat: | im body-tag:
<div id="container_1">blub</div>
|
ganz reduziert. wenn man das im browser ansieht, ist rechts der vertikale scrollbalken, und man kann/muss um 100 px (eben genau der wert, um den der container_1 vom "top" entfernt ist) nach unten scrollen, um den gesamten container zu sehen. ich möchte aber dass der container bis zum unteren rand geht (also in diesem fall -100px von der höhe da).
und das problem im ganzen:
der obere code ist ja komplett reduziert. wenn ich jetzt mehrere container an verschiedenen stellen (vom top entfernt) in der html datei habe.. wie löse ich das dann erst? dass die verschiedenen container tatsächlich jeweils nur bis zum browserrand unten gehen.
Hoffe auf Hilfe
Danke.
|
|
|
|
|
|
|
|
Ähnliche Themen |
InDesign Website-Layout umsetzen
Wie Layout in CSS umsetzen?
Photoshop Layout in CSS umsetzen?
Design umsetzen zur einer Website!
Website mit festen Layout in dynamisches Layout umbauen
Übergroßes Layout mit mehreren Layern Divs zentrieren
|
|