CSS Layout & Positionierung

Seite 1 von 4 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_layout_amp_positionierung_83187/page_1 - zur Vollversion wechseln!

Hi, ich hab gestern ein wenig angefangen mich intensiever mit CSS zu beschäftigen und hätte jetzt ein paar Fragen.
Zuerst einaml ein Bild:

Auf diesem Bild sind all meine Probleme Vorhanden

1) Als erstes: Was kann ich machen das die Tabelle sich auch verkleinert? das schaut nicht gerade hübsch aus wenn ich das Fenster klein mache. Hier der aktuell verwendete code:

/* main layout */

body {
background-color:#fff;
margin:10px 10px 10px 10px;
padding:0px; }

.banner {
background: #ccf;
height:40px;
border:1px solid #000; }

.navigation {
background: #ccf;
position: absolute;
left:10px;
top:53px;
width:160px;
height: 500px;
border:1px solid #000; }

.main{
margin-left: 163px;
margin-right: 103px;
margin-top: 1px;
border:1px solid #000;
padding: 10px;}

.bottom {
background: #ccf;
margin-left: 203px;
margin-top: 3px;
border:1px solid #000; }

.right {
background: #ccf;
position: absolute;
right:10px;
top:53px;
width:100px;
background:#ccf;
border:1px solid #000;
padding-bottom:3px; }

/* end main layout */

2) Wie kann ich ein ganzes <div> feld als link interpretieren und nicht nur der eingefügte Text wie man ja am linken Teil des Bildes sieht.

3) Wie kann ich nur die links einer kategorie beeinflussen, ich dachte so:

#menue a:link{}

aber das geht nicht

4) Wie kann ich nachdem 3 erledigt ist das fenster das die URL anzeigt abschalten.

der dazugehörige code:

/* left side navigation */

.category {
background: #fff;
margin-left: 5px;
margin-top: 5px;
margin-right:5px;
border:1px solid #000;
padding-bottom: 5px; }

.menue_head{
background:#ffc;
padding:5px;
font-weight:600; }

.menue{
background:#ffc;
padding:3px;
font-size:16px;
margin-left: 10px;
margin-top: 6px;
margin-right:10px;
border: lpx solid #000;}

.menue:hover {
background:#ccf; }

.menue:active{ }

.menue:link{
font-weight:600; }

/* end left side navigation */

Ich suche jetzt schon seit Stunden im Netzt nach einer Antwort (wie man an den tabs des Browsers im Bild sieht ) aber finde keine zufriedenstellenden Lösungen.

Ich bin auch für allgemeine Anregungen und Kritik, sei es am layout selbst oder am code offen.

Ich hoffe ihr könnt (wollt) mir helfen.

thx

alexsb

also zu punkt 1 kann ich dir mal die seite empfehlen:
http://www.thenoodleincident.com/tu...sson/boxes.html

danke, aber die Seite hat ja genau das gleiche Problem wie ich, der Content wird nicht mitverändert..

ich habe noch eine frage:

ich hab ein element
<div>
<div class = "message">
Diesen Text hätte ich gerne Zentriert, sowohl vertikal als auch horizontal, innerhalb des Elements
</div>
<div>

das problem sind die überschriften: sie verhindern, daß die zellen kleiner werden, weil sie nicht umgebrochen werden können.

1) versuch <WBR> tags an silbengrenzein einzufügen
2) setze für die den main bereich ein "overflow: hidden"

3) setzte für manche cellen evt. ein "max-width".

Zitat von atrox

das problem sind die überschriften: sie verhindern, daß die zellen kleiner werden, weil sie nicht umgebrochen werden können.

2) setze für die den main bereich ein "overflow: hidden"

ad 2)
<div onclick="window.location='someother.html'">

ad 3)
versuch es mit
.menue a, .menue a:link { ... }

ad 4)
weiss nicht ganz was du meinst.

ad 4) willst du damit den browser bzw. die ganze seite schliessen? irgendwie versteh ich die frage da nicht so ganz

nein, ich denke da hab ich mich unklar ausgedrückt. ich möchte dieses kleine Fenster das das Ziel des links einblendet nicht haben, aber ich bin mir nicht mehr sicher ob ich das überhaupt eliminiern soll/kann

Zitat von atrox

ad 2)
<div onclick="window.location='someother.html'">

Zitat von alexsb

danke nochmal, aber ist das 100% xhtml strict conform?

ahh.. du meinst vielleicht, wenn du mit der maus drüberfährst erhältst du einen gelben "tooltip" ? versuch es mit
<a href="..." title="some info">...</a>

Zitat von alexsb

Zitat von Moonwalker

Der Test ist sicher gefakt das kanns nicht sein auf watercoolplanet.de is der x cool auf platz 3 hmm

Code:

<style type="text/css">
.navigation a {
    display: block;
}
</style>

Code:

<div class="navigation">
	<h1>Filme</h1>
	<a href="">Meine Filme</a>
	<a href="">Hinzufuegen</a>
	<a href="">Alle Filme</a>
	<a href="">Rating</a>
	<h1>Einstellungen</h1>
	<a href="">Einstellungen</a>
	<a href="">Benutzer</a>
	<a href="">F.A.Q.</a>
	<a href="">Logout</a>
	<h1>Links</h1>
	<a href="">IMDB</a>
</div>

Zitat

3) Wie kann ich nur die links einer kategorie beeinflussen, ich dachte so:

#menue a:link{}

Zitat

4) Wie kann ich nachdem 3 erledigt ist das fenster das die URL anzeigt abschalten.

Wahnsinn, danke für die irrsinnig kompetente Antwort, werd das gleich mal umsetzten

ich hab schon wieder probleme, hab grad 1 stunde lang versucht diese beiden boxen nebeneinander zu positionieren:

ich schaffs nicht.

der html/php code:

Code:

 
 <div class = "desc-detail-left">
  <table>
  <tr>
   [...]
  <tr>  
  </table>
  </div>
  <div  class = "desc-detail-right"">
  <table>
  <tr>
    [...]
  </tr>
  </table>
  </div>

Code:

.desc-detail-left{
  position: relative;
  margin-top:10px;
  width:45%;
  background:#E9ECEC;
  border-width: 2px;
  border-style: dashed;
  border-color: #666;
  overflow:hidden;}

.desc-detail-right{
  margin-top:0px;
  margin-left: 53%;
  width: 45%;
  background:#E9ECEC;
  border-width: 2px;
  border-style: dashed;
  border-color: #666;
  overflow:hidden;}

Was du willst ist also zwei, Block-Level Elemente nebeneinander positionieren.

Ein Block-Level Element nimmt einmal prinzipiell _immer_ den ganze ihm in der Breite zur Verfuegung stehenden Platz ein. D.h. auch wenn du sagt "width: 45%;" und "margin-left: 53%;" ist der Platz, den du durch den margin eingerueckt hast, nicht einfach so fuer andere Elemente verfuegbar.

Das Zauberwort lautet "float" (und dazugehoerig auch "clear").

Grundvorraussetzungen:
- float Elements sind automatisch immer Block-Level Elemente (z.B. DIV)
- float braucht IMMER AUSNAHMSLOS eine Breitenangabe (width property)

Zulaessige Werte fuer "float" sind "left", "right" und "none".

Ausgehend von der Position, an der du das DIV Element platzierst, wird das Element ganz nach links bzw. ganz nach rechts in der aktuellen Zeile geschoben mit der Breite die du ihm gegeben hast.

Der Text der direkt ausserhalb dieses DIVs ist, umfliesst das DIV Element.

Chart 1

Code:

<div>
	<div style="float: left; width: 66%;">
		bin im float DIV drinnen
	</div>
	text ausserhalb umfliesst das DIV ganz normal
</div>

+---irgendein container DIV---------+
| +---DIV float: left--+            |
| |bin im float DIV    | text ausser|
| |drinnen             | halb umflie|
| +--------------------| sst das DIV|
| ganz normal                       |
+-----------------------------------+

Code:

<div>
	<div style="float: left; width: 33%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 33%;">
		bin das zweite float:left
	</div>
	text ausserhalb umfliesst das DIV ganz normal
</div>

+---irgendein container DIV--------------------------------+
| +-DIV float: left-++---DIV float:left-+ text ausserhalb  |
| |bin das erste    ||bin das zweite    | umfliesst die    |
| |float:left       ||float: left       | floats ganz      |
| +-----------------++------------------+ normal wie jeder |
| andere Text                                              |
+----------------------------------------------------------+

Code:

<div>
	<div style="float: left; width: 50%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 50%;">
		bin das zweite float:left
	</div>
</div>

+---irgendein container DIV-------------+
|+-DIV float: left-++---DIV float:left-+|
||bin das erste    ||bin das zweite    ||
||float:left       ||float: left       ||
|+-----------------++------------------+|
+---------------------------------------+

Code:

<div>
	<div style="float: left; width: 33%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 33%;">
		bin das zweite float:left
	</div>
	<br style="clear: left;">
	Text wird durch clear:left unterhalb der floats gesetzt.
</div>

+---irgendein container DIV--------------------------------+
| +-DIV float: left-++---DIV float:left-+                  |
| |bin das erste    ||bin das zweite    |                  |
| |float:left       ||float: left       |                  |
| +-----------------++------------------+                  |
| Text wird durch clear:left unterhalb der floats gesetzt. |
+----------------------------------------------------------+

Code:

<div>
	<div style="float: left; width: 50%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 50%;">
		bin das zweite float:left
	</div>
</div>

+---irgendein container DIV-------------+
++-DIV float: left-++---DIV float:left-++
 |bin das erste    ||bin das zweite    |
 |float:left       ||float: left       |
 +-----------------++------------------+

Code:

<div>
	<div style="float: left; width: 50%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 50%;">
		bin das zweite float:left
	</div>
	<br style="clear: left;">
</div>

+---irgendein container DIV-------------+
|+-DIV float: left-++---DIV float:left-+|
||bin das erste    ||bin das zweite    ||
||float:left       ||float: left       ||
|+-----------------++------------------+|
+---------------------------------------+

Code:

desc-detail-left {
    float: left;
    width: 45%;
    background: #E9ECEC;
    border-width: 2px;
    border-style: dashed;
    border-color: #666;
}

.desc-detail-right {
    float: left;
    width: 45%;
    background: #E9ECEC;
    border-width: 2px;
    border-style: dashed;
    border-color: #666;
}

Code:

.desc-detail-umbruch {
	clear: left;
}

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025