Homepage nicht mit iExplorer Kompatibel (Zellengröße fixieren?)
- Ersteller rest0ck
- Erstellt am
rest0ck
Neues Mitglied
Hey, also ich hab mir nun alles durchgelesen und hab ein paar Sachen nicht ganz verstanden u.a.:
Also ich will jetzt meine Homepage quasi ehm Zukunftsorientiert aufbauen und verwende divs, css und all den Kram.
Jetzt erstelle ich z.b. ein div und teile dem die id "content" zu
Content sieht dann so aus:
also h1 in content hat n Hintergrundbild, richtig?
Gestaltet man so dann die Homepage, oder wie setze ich mehrere Bilder, ohne Tabellen und mehrere Divs zu verwenden?
Obwohl das mit dem content jetzt wenig Sinn macht, nennen wir es einfach mal sowas wie "style", ka.
Wie würde ich die divs am besten aufteilen auf meiner HP, die ist ja im grunde sehr simple gehalten.
Header, Content, Footer?
rest0ck
Also ich will jetzt meine Homepage quasi ehm Zukunftsorientiert aufbauen und verwende divs, css und all den Kram.
Jetzt erstelle ich z.b. ein div und teile dem die id "content" zu
Content sieht dann so aus:
Code:
#content h1 {
image-backdrop:urlblablabla;
width: x;
height:x;
}Gestaltet man so dann die Homepage, oder wie setze ich mehrere Bilder, ohne Tabellen und mehrere Divs zu verwenden?
Obwohl das mit dem content jetzt wenig Sinn macht, nennen wir es einfach mal sowas wie "style", ka.
Wie würde ich die divs am besten aufteilen auf meiner HP, die ist ja im grunde sehr simple gehalten.
Header, Content, Footer?
rest0ck
rest0ck
Neues Mitglied
Hab mal ein bisschen rumgebastelt, ..bis ..3:22
Verdammt ist es spät, gar nicht drauf geachtet.
Nun ja, hier ist mein Ergebnis, das immerhin im iExplorer richtig angezeigt wird:
test
Trotzdem glaube ich nicht, das ich das so gut gelöst habe denn z.b. musste ich oben links und oben rechts eine feste Größe angeben, hab nicht raus gefunden, wie ich das auto. in der Größe skalieren lasse, wenn es "float" (wie auch immer man das jetzt sagen soll .."es float" klingt aber doch super :>) ..also mit dem Frame in der Mitte.
Und auch sonst hatte ich arghe Probleme und ich denke meine css ist zu groß und falsch, wuah weiß nicht:
http://dl.dropbox.com/u/7066359/hp/testcss.css
Könnt ja mal sagen, was ihr davon haltet
Oh und wenn ich das jetzt so verwenden würde, wie würde ich denn dann den Hintergrund in der mitte, da wo jetzt das "Ascardia Homepage" ist, regeln? zz ist es halt einfach so:
aber ich kann wohl schlecht für jeden Abschnitt ein neues id-....Ding erstellen, also doch schon aber das geht doch sicher einfacher, oder?
rest0ck
Verdammt ist es spät, gar nicht drauf geachtet.
Nun ja, hier ist mein Ergebnis, das immerhin im iExplorer richtig angezeigt wird:
test
Trotzdem glaube ich nicht, das ich das so gut gelöst habe denn z.b. musste ich oben links und oben rechts eine feste Größe angeben, hab nicht raus gefunden, wie ich das auto. in der Größe skalieren lasse, wenn es "float" (wie auch immer man das jetzt sagen soll .."es float" klingt aber doch super :>) ..also mit dem Frame in der Mitte.
Und auch sonst hatte ich arghe Probleme und ich denke meine css ist zu groß und falsch, wuah weiß nicht:
http://dl.dropbox.com/u/7066359/hp/testcss.css
Könnt ja mal sagen, was ihr davon haltet
Oh und wenn ich das jetzt so verwenden würde, wie würde ich denn dann den Hintergrund in der mitte, da wo jetzt das "Ascardia Homepage" ist, regeln? zz ist es halt einfach so:
HTML:
#main2-rf2 {
background-image:url(Bilder/rf2_u.gif);
background-position:right top;
background-repeat:no-repeat ;
margin-left:199px;
margin-right:168px;
}rest0ck
rest0ck
Neues Mitglied
Was ich zum Beispiel nicht ganz verstehe:
Hab also in dem großen DIV einen kleinen mit float:right und margin-top + margin-right.
Wenn ich den nun aber größer mache, weil viel Text drin ist (weiße Pfeile), dann ragt das einfach über den Rand hinaus, weil es ja "float" .. ich will aber, das dann der div mit den roten Pfeilen auch größer wird, sonst ist ja 1. der Text über dem Footer und 2. zieht sich der Hintergrund des Frames dahinter nicht mit.
Wie würde ich den float:right div hier besser setzen, oder ka ..kann ich nicht sagen "du sollst nicht über den Rand hinaus ragen, aber trotzdem da rechts sein!". Wie setze ich die position, ohne float zu verwenden? Hab das hier immer damit gemacht.
rest0ck
/e
Was ich auch nicht verstehe, sind die Fehler die mir das Ding hier ausspuckt:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
Alle Anderen Meldungen blick ich auch nicht so ganz :/
/e2
Okay das der Header überflossen wird, kann ich mit clear:right; stoppen, aber der große div zieht sich immer noch nicht mit in der Länge (rote Pfeile)
Hab also in dem großen DIV einen kleinen mit float:right und margin-top + margin-right.
Wenn ich den nun aber größer mache, weil viel Text drin ist (weiße Pfeile), dann ragt das einfach über den Rand hinaus, weil es ja "float" .. ich will aber, das dann der div mit den roten Pfeilen auch größer wird, sonst ist ja 1. der Text über dem Footer und 2. zieht sich der Hintergrund des Frames dahinter nicht mit.
Wie würde ich den float:right div hier besser setzen, oder ka ..kann ich nicht sagen "du sollst nicht über den Rand hinaus ragen, aber trotzdem da rechts sein!". Wie setze ich die position, ohne float zu verwenden? Hab das hier immer damit gemacht.
rest0ck
/e
Was ich auch nicht verstehe, sind die Fehler die mir das Ding hier ausspuckt:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
? .. Wenn ich das nicht setze, haben die Bilder in iExplorer und auch Firefox nen dicken Rand.
Alle Anderen Meldungen blick ich auch nicht so ganz :/
/e2
Okay das der Header überflossen wird, kann ich mit clear:right; stoppen, aber der große div zieht sich immer noch nicht mit in der Länge (rote Pfeile)
Zuletzt bearbeitet:
1.
Du musst nicht für jedes Element eine neue ID definieren. Da kannst auch Klassen benutzen.
2.
Float war nicht direkt zur Positionierung eingeführt. Es sollte einen Textumfluss um ein element erzeugen. Deshalb fließt der Text bei größerer Länge um dein linken Bild um.
Dies lässt sich verhindern, indem du dem gefloateten Element eine feste größe gibst.
3.
Die Validationsfehler kommen daher:
Du musst nicht für jedes Element eine neue ID definieren. Da kannst auch Klassen benutzen.
2.
Float war nicht direkt zur Positionierung eingeführt. Es sollte einen Textumfluss um ein element erzeugen. Deshalb fließt der Text bei größerer Länge um dein linken Bild um.
Dies lässt sich verhindern, indem du dem gefloateten Element eine feste größe gibst.
3.
Die Validationsfehler kommen daher:
- NET-enabling start-tag requires SHORTTAG YES - Dieser Slash / am Ende jeden BR-Tags wird nur bei XHTML (+ ein paar andere HTML-Versionen) genutzt. Da der von dir angegebene Doctype HTML 4.01 entspricht, solltest du einfach nur <br> schreiben.
- required attribute "ALT" not specified - Das IMG-Tag benötigt die Angabe eines Alternativtextes (falls zB Bild nicht geladen werden konnte) durch das Attribut alt: <img src="#" alt="Alternativtext">
- there is no attribute "BORDER" - Ein Rahmen ist Sache von CSS. -> Weg damit und ab ins Stylesheet.
rest0ck
Neues Mitglied
Alles klar, danke dir. Hab nochmal geschaut wie das nochmal mit id und class ist, also jede id nur 1x, class mehrmals. Gut, nun dachte ich mir eben, das ich speziell bei meiner hp z.b. eine class erstelle mit:
das wende ich dann jedes mal auf den div an, in dem dann die Überschrift steht, welche ich als id deklariere:
(für jede Überschrift eine neue id (rf3,4,5,6..)
und dazu noch diese class:
(denn links und rechts soll ja platz sein wegen des Rands
so das es im endeffekt so aussieht:
aber das kommt dann dabei raus:
Also kein margin, keine mindest-höhe (hab hier nur höhe durch die Zahlen da erreicht), nur Hintergrundbild und rf-tags ..?
HTML:
.rf-tags {
background-position:right top;
background-repeat:no-repeat ;
}
HTML:
#rf2 {
background-image:url(Bilder/rf2_u.gif);
}und dazu noch diese class:
(denn links und rechts soll ja platz sein wegen des Rands
HTML:
.rf-main {
margin-left:199px;
margin-right:168px;
min-height:50px;
}so das es im endeffekt so aussieht:
HTML:
<div class="rf-main, rf-tags" id="rf2"></div>aber das kommt dann dabei raus:
Also kein margin, keine mindest-höhe (hab hier nur höhe durch die Zahlen da erreicht), nur Hintergrundbild und rf-tags ..?
Mehrere Klassen eines Elementes trennt man mit einem einfachen Leerzeichen, nicht mit einem Kommata.
rest0ck
Neues Mitglied
hab das Gefühl, ne Menge grundlegende Dinge einfach noch nicht verstanden zu haben ..
ein div mit
(stimmt in der Größe nicht, aber spielt grad keine Rolle)
soll rechts neben das Bild:
ein div mit
HTML:
.rf-text {
float:right;
width:230px;
margin-right:190px;
margin-top:39px;
}soll rechts neben das Bild:
HTML:
<div id="rf-wrap">
<div class="rf-main rf-tags" id="rf2">
<img src="Bilder/rf2.gif" class="img">
<div class="rf-text">
<!-- Hier soll eben der Text rein :s -->
</div>
</div>
<div id="footer"></div>
</div>Hallo.
Das Grundgerüst ja aber nicht das Layout.
Hier ist ein Link für dich: Div-Layout vs. Semantik.
Danach solltest du einiges besser verstehen.
Gruss
Elroy
Das Grundgerüst ja aber nicht das Layout.
Hier ist ein Link für dich: Div-Layout vs. Semantik.
Danach solltest du einiges besser verstehen.
Gruss
Elroy
rest0ck
Neues Mitglied
Woah ich krieg grad leider nichts in den Kopf, mit Musik haut das nicht hin und die tollen Nachbarkinder, die direkt neben meiner Wand hier sind, haben wieder richtig supi Musik an -_________-
Wie dem auch sei.
Also mein Problem oben hab ich gelöst, musste einfach Div vor das Bild stellen.
Ich habs so gemacht, wie ich es gemacht habe, weil ich mir die Beispieldokumente auf Aktuelles | Webdesign mit XHTML und CSS angesehen habe und dort wurde auch immer ein wrap erstellt, dann ein header, content, footer und drin nochmal sidebar.
Ich denke ich hab verstanden, wie das gemeint ist alles, nur blicke ich nicht wie ich das dann passend gestalten soll. Also bei einer Tabelle beispielsweise kann ich ja sagen:
Oben 10px hoch, dieses HG-Bild, links noch ne spalte 7px breit mit dem und dem HG-Bild, rechts das selbe etc.
Muss man, wenn man mit divs arbeitet, die Bilder, die das Design ausmachen (ja ich spreche jetzt erstmal nur vom Design), ganz anders schneiden? In Photoshop hol ich mir eben immer das slice-werkzeug und schneide es so zurecht, das es für Tabellen passend ist. Was ich ja nun nicht mehr machen möchte :>
Aber wenn ich nicht zig divs erstelle, kann ich ja nicht sagen, dort soll das Bild sein, dort jenes, dies das etc pp, ich kann doch jedem div nur 1 Bild zuweisen?
Argh ich bin verwirrt und werd jetzt erstmal .. kurz Pause machen und dann paar Tuts oder so anschauen :/
/e Die Beispiele auf der Seite z.b. ich weiß nicht was es mir genau bringt bei einer HP mit vielen grafischen Elementen, also doch nur..ich weiß nicht wie ich es dann anwende, so das die Bilder auch alle an der korrekten Position sitzen :/
Wie dem auch sei.
Also mein Problem oben hab ich gelöst, musste einfach Div vor das Bild stellen.
Ich habs so gemacht, wie ich es gemacht habe, weil ich mir die Beispieldokumente auf Aktuelles | Webdesign mit XHTML und CSS angesehen habe und dort wurde auch immer ein wrap erstellt, dann ein header, content, footer und drin nochmal sidebar.
Ich denke ich hab verstanden, wie das gemeint ist alles, nur blicke ich nicht wie ich das dann passend gestalten soll. Also bei einer Tabelle beispielsweise kann ich ja sagen:
Oben 10px hoch, dieses HG-Bild, links noch ne spalte 7px breit mit dem und dem HG-Bild, rechts das selbe etc.
Muss man, wenn man mit divs arbeitet, die Bilder, die das Design ausmachen (ja ich spreche jetzt erstmal nur vom Design), ganz anders schneiden? In Photoshop hol ich mir eben immer das slice-werkzeug und schneide es so zurecht, das es für Tabellen passend ist. Was ich ja nun nicht mehr machen möchte :>
Aber wenn ich nicht zig divs erstelle, kann ich ja nicht sagen, dort soll das Bild sein, dort jenes, dies das etc pp, ich kann doch jedem div nur 1 Bild zuweisen?
Argh ich bin verwirrt und werd jetzt erstmal .. kurz Pause machen und dann paar Tuts oder so anschauen :/
/e Die Beispiele auf der Seite z.b. ich weiß nicht was es mir genau bringt bei einer HP mit vielen grafischen Elementen, also doch nur..ich weiß nicht wie ich es dann anwende, so das die Bilder auch alle an der korrekten Position sitzen :/
Zuletzt bearbeitet:
rest0ck
Neues Mitglied
Ja genau das hab ich aber doch gemacht? Und den Wrapper kann ich bei mir schlecht ersetzen, weil oben 1HG Bild ist (Header) und im Body auch noch. Ich kann ja nicht Header-Bild + HG-Bild in den Body stecken?
Ich les hier alles mögliche durch und finde immer nur so std Layout wie Header, Footer, Sidebar, oder mal 3 Leisten in der Mitte, prozentual richtig etc aber ich finde keine einleuchtende Erklärung für mein Problem: Das verwenden von Hintergrundbildern die nicht nicht so einfach zu lösen sind wie in den ganzen Beispielen zu sehen? :/
Ich les hier alles mögliche durch und finde immer nur so std Layout wie Header, Footer, Sidebar, oder mal 3 Leisten in der Mitte, prozentual richtig etc aber ich finde keine einleuchtende Erklärung für mein Problem: Das verwenden von Hintergrundbildern die nicht nicht so einfach zu lösen sind wie in den ganzen Beispielen zu sehen? :/
rest0ck
Neues Mitglied
Okay hab mir ein paar Beispiele angeschaut u.a. Willkommen bei FEGRO Fenster aus REHAU Profilen - direkt vom Erzeuger - OHNE Zwischenhandel - OHNE Vertreter - Bad Hall - Österreich
Oben das HOME Ding im Header
und angesprochen wird das ganze wohl mit
soweit so gut aber was ist nun, wenn sich der Inhalt ändert, wenn ich z.B. jetzt <h1> als ein Bild deklariert habe und jetzt auf einmal die Überschrift einfach weg fällt? ._.
Und bei meinem Beispiel hab ich so wenig Text, ..da kenn ich doch kaum jedes Element einzeln ansprechen, das es auch passt, oder doch?
Ich meine, angenommen ich erstelle jetzt 1 div für alle meine Referenzen. Jede Überschrift hat ein anderes HG-Bild. Das könnte ich oben jetzt z.b. mit <h1>Blabla</h1> festlegen, richtig? Und bei den 5 anderen? In dem fall würd es grad so passen, aber was dann? Die sind ja in einem div, also kann ich doch auch nicht sagen h1 in dem div ist dieses, in dem div ist h1 dann jenes?
Verflucht ich denke mal, ich sollte weiter unten anfangen >.<
Oben das HOME Ding im Header
HTML:
<a id="home" href="index.php" title="zur FEGRO Startseite"><b>HOME</b></a>und angesprochen wird das ganze wohl mit
HTML:
/* home link */
a#home {
display:block;
width:139px;
height:18px;
padding:108px 0 0 115px;
position:absolute;
top:27px;
left:20px;
text-decoration:none;
}
a#home b {
display:none;
}
a#home:hover b {
display:block;
}
a#home, a#home:hover {
border:none;
}Und bei meinem Beispiel hab ich so wenig Text, ..da kenn ich doch kaum jedes Element einzeln ansprechen, das es auch passt, oder doch?
Ich meine, angenommen ich erstelle jetzt 1 div für alle meine Referenzen. Jede Überschrift hat ein anderes HG-Bild. Das könnte ich oben jetzt z.b. mit <h1>Blabla</h1> festlegen, richtig? Und bei den 5 anderen? In dem fall würd es grad so passen, aber was dann? Die sind ja in einem div, also kann ich doch auch nicht sagen h1 in dem div ist dieses, in dem div ist h1 dann jenes?
Verflucht ich denke mal, ich sollte weiter unten anfangen >.<
Hallo.
Wieviele <h1> gedenkst du den auf deiner Seite zu haben?
<h1> ist die Überschrift und kommt normaslerweise 1 mal vor.
Wenn ein Tag mehrmals vorkoimmt kannst du immer noch Klassen oder IDs verteilen.
Ein <div> kann zum Beispiel benutzt werden wenn du mehrere Absätze mit einem Hintergrundbild versehen willst, dann ist ein <div> die richtige Wahl und auch semantisch korrekt.
Aber das siehst du ja erst wenn du den Inhalt hast.
Gruss
Elroy
Wieviele <h1> gedenkst du den auf deiner Seite zu haben?
<h1> ist die Überschrift und kommt normaslerweise 1 mal vor.
Wenn ein Tag mehrmals vorkoimmt kannst du immer noch Klassen oder IDs verteilen.
Ein <div> kann zum Beispiel benutzt werden wenn du mehrere Absätze mit einem Hintergrundbild versehen willst, dann ist ein <div> die richtige Wahl und auch semantisch korrekt.
Aber das siehst du ja erst wenn du den Inhalt hast.
Gruss
Elroy
