Diverse Fragen zu Design

Status
Nicht offen für weitere Antworten.
S

Superdok

Erfahrenes Mitglied
Hallo, ich hab vor eine Homepage zu gestalten, die grob so ausshen sollte:
http://renevaggio.deviantart.com/art/new-website-inter-lan-83271278

Dazu hab ich aber noch ein paar Fragen:
1.) Wie bekomme ich so einen Schimmer (diese Halbtransparenz) um den Kasten herum hin? Und zwar so, dass es sowohl im FF als auch im IE6+ funktioniert.
2.)Wie sollte die Homepage aufgebaut werden?
Das Logo ist überhalb des Kastens, um den Kasten ist aber dieser Schimmer (also ist das Logo überhalb des Schimmers. Die Frage ist jetzt wie die Divs ineinander verschachtelt werden sollten, damit der Aufbau stimmt.

Oder es kann auch sein: Es gibt ein Div, in dem alle anderen sind. Dieses wird vertikal und horizontal zentriert (oder vertikal keine Prozent Angabe, sondern eine Feste). Ist das Logo dann außerhalb dieses Divs irgendwo auf dem Hintergrund?


Dok
 
Hi,

wieso studierst du nicht einfach selbständig den Quellcode der Seite, um ihren Aufbau zu verstehen?
 
Entschuldigung wenn ich mich falsch ausgedrückt habe, aber ich meine nicht die deviantart.com Seite, sondern das Bild das auf dem oben angegeben Link zu sehen ist.
Also das Bild befindet sich ganz genau hier:
http://fc07.deviantart.com/fs27/f/2008/110/4/5/new_website_inter_lan_by_renevaggio.jpg

Normalerweise würde ich mir selber den Quelltext durchlesen, allerdings ist dies nur ein Bild und keine schon fertige Seite. Auf diesem Bild kann man auch den "Schimmer" sehn. Da ich einen solchen "Schimmer" bzw. einen solchen Aufbau noch nie gemacht habe, wollte ich hier nachfragen, wie man eine solche Seite aufbauen sollte und wie man einen solchen "Schimmer", um den "Kasten" herumkriegt.

Dok
 
Das bekommst du mit einer Transparenten png hin. bzw. für Internetexplorer musst du gif verwenden.

Wenn du mit DIV arbeitest, brauchst du die Haupt-BOX in 4 Unterkartegorien zu stecken und jede mit ein Background ausstatten und denn dann mit zb. background: url(phat) top left; in der CSS ausrichten.

geht bestimmt auch noch einfacher, ich machs halt immer so.


Grüße
 
Superdok hat gesagt.:
Entschuldigung wenn ich mich falsch ausgedrückt habe, aber ich meine nicht die deviantart.com Seite, sondern das Bild das auf dem oben angegeben Link zu sehen ist.
Also das Bild befindet sich ganz genau hier:
http://fc07.deviantart.com/fs27/f/2008/110/4/5/new_website_inter_lan_by_renevaggio.jpg
Zum Vergrößern anklicken....
Dann solltest du das nächste Mal dein Anliegen unmissverständlich formulieren, denn aus deiner Formulierung und dem erstgenannten Link geht nicht klar hervor, dass du das darin dargestellte Bild meinst.

Fruitgum hat gesagt.:
Das bekommst du mit einer Transparenten png hin. bzw. für Internetexplorer musst du gif verwenden.
Zum Vergrößern anklicken....
Es gibt auch Lösungen, um im IE6 transparente PNGs darzustellen, wie z.B. Cross-browser semi-transparent backgrounds, und der aktuelle IE7 kann mit diesem Format nun umgehen.
 
K das mit dem Schimmer werde ich mal probieren, ob das mit dem png-trick funktioniert.

Zum Aufbau, wenn ich das richtig verstanden habe:
Es gibt ein HauptDiv (Container) mit dem Trasnpareten png-Hintergrund. In diesem befindet sich ein weiteres Div mit weissem Hintergrund, welches aber über margin zu jeder Seite einen kleinen Abstand zum Container-Div hat (->somit entsteht der Schimmer). Dieses Div wird dann weiter aufgeteilt in die einzelnen Divs (Menü, Inhalt, rechte Seite, Footer...).
Das Container Div wird einfach horizontalk und vertikal ausgerichtet/zentriert... Das Logo über diesem Div ist dann einfach ein Bild auf dem dem Hintergrundbild.
Ist das soweit richtig?
__
Ich wollte nicht extra ein neues Thema aufmachen, da dies schon behandelt wurde, ich aber trotzdem nicht hinkriege:
Es geht um dieses Problem: http://www.positioniseverything.net/easyclearing.html
Also das ein umgebendes Div (Container) nicht die Höhe des inneren Div annimmt.
Der Quelltext-Ausschnitt sieht so aus:
HTML: 
<div id="gallery">
  <div id="thumb">>BILD1</div>
  <div id="info">TITLE1<br />BESCHREIBUNG</div>     
</div>
Code: 
#thumb {
	float: left;
	width: 47px;
}
#info {
	float:right;
	width: 233px;
}
#gallery{
        width: 280px;
	margin-bottom:10px; 
	padding-bottom:10px; 
	border-bottom: dotted 1px #999999;		
}
Das Problem liegt darin, dass das umgebende Div gallery sich in der Höhe nicht den beiden innen liegenden Divs anpasst und somit die gepunktete Linie an der flachen Position liegt. Ich weis, dass man dies mit clear:both lösen kann, leider weis ich nicht, welchem Element ich dies zuweisen muss.
Versucht habe ich dabei folgendes:
<div id="gallery" class="clearfix">
 
Hast du denn auch den erforderlichen CSS-Code der Klasse .clearfix in dein Stylesheet übernommen?

Code: 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Damit funktioniert es mit deinem übrigen Quellcode bei mir einwandfrei.
 
Ups, die CSS Regeln hab ich jetzt glatt vergessen. Eigentlich dachte ich ich hätte die bereits eingefügt. Danke nun funktioniert es!

Ich versuch ich jetzt mal am Aufbau und melde mich hier, wenn ich irgendwo nicht weiterkomme.

Dok
 
So ich hab mal Zeit gefunden und mich nochmal drangesetzt. Das mit dem transparenten png funtioniert soweit im FF und im Internet Explorer. Allerdings gibts im Mozilla irgendwie Probleme mit dem AUfbau. Der Aufbau soll mehr oder weniger so ausehen wie auf dem Bild oben.
Zum Testen habe ich einen orangenen Hintergrund ausgewählt. Auf diesen dann das Div mit dem transparenten .png und in dieses dann noch ein Div mit weissem Hintergrund. Das Div mit dem weissem Hintergrund sieht man komischerweise allerdings nur im IE. Im FF sieht man nur einen orangeren Hintergrund mit einem transparenten png darauf. Außerdem kann man im FF nach unten scrollen, obwohl noch gar kein Inhalt in den Divs ist.

Der Quelltext, alles in einem sieht so aus:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<style type="text/css">
a, a:visited {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #aaba1f;
	line-height: 16px;
	text-decoration:none;
	padding: 2px;
}
a:hover {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #fff;
	line-height: 16px;
	text-decoration: line-through;
	background-color: #aaba1f;
	padding: 2px;
}
html, body {
	height:100%;
	padding:0;
	margin:0;
	border:0;	
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #333333;
	background-color:#FFCC00; /*Test*/
	background-image:url();  	
}
#box {
	padding-top: 20px;
	padding-left:20px;
	padding-bottom:20px;
	margin: 0 auto;
	margin-top: 100px;
	width: 800px;	
	/*nur Internet Explorer*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='75p_white.png');
}
/*nur Mozilla Firefox*/
#box[id] {
	background-image:url(75p_white.png);
}
#container {
	width: 780px;
	background-color:#FFFFFF;
}
#contentleft {
	float: left;
	width: 600px;
}
#contentright {
	float:right;
	width:180px;
}
#navigation {
	height: 80px;
	width: 600px;
}
#maincontent {
	width: 600px;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="box" class="clearfix">
  <div id="container">
    <div id="contentleft">
      <div id="navigation"></div>
      <div id="maincontent"></div>
    </div>
    <div id="contentright"></div>
  </div>
</div>
</body>
</html>

In meiner Verzweiflung habe ich sogar das mit dem clearfix gemacht, obwohl ich nicht weis ob das überhaupt notwendig ist in dem Fall.
 
Hi,

nimm mal folgende Änderungen und Erweiterungen im Stylesheet vor:

Code: 
html, body {
        /*height:100%;*/ /* auskommentiert = deaktiviert, Grund für vertikalen Scrollbalken */
        padding:0;
        margin:0;
        border:0;
        font-family: Helvetica, Arial, Verdana, sans-serif;
        font-size: 11px;
        color: #333333;
        background-color:#FFCC00; /*Test*/
        background-image:url();
}

.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
und ruf die Klasse .clearfix nicht im DIV #box, sondern #container auf, denn darin befinden sich die beiden floatenden Spaltenblöcke, weshalb die standardkonformen Browser die Hintergrundfarbe dieser Box derzeit nicht anzeigen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück