mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:28 Benutzername: Passwort: Auto-Login

Thema: 2 Divs auf Seite zentrieren vom 19.03.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> 2 Divs auf Seite zentrieren
Seite: 1, 2  Weiter
Autor Nachricht
lexk
Threadersteller

Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht: Männlich
Verfasst Do 19.03.2009 19:23
Titel

2 Divs auf Seite zentrieren

Antworten mit Zitat Zum Seitenanfang

Guuuten Abend,

ich habe ein kleines Problem, ich steh aufm Schlauch und komme garnicht weiter.
Ich brächte folgendes:



mein Code wäre:
HTML:
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>testseite</title>
<link href="white.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="content">content</div>
  <div id="right">right</div>
</body>

</html>


CSS:
Code:

body {
   text-align: center;
   background-color:#DDD;
   }
body div {
   margin: 0 auto;
   }
#content {
   width:800px;
   height:100%;
   background-color:#FFF;
}
#rechts {
   width:200px;
   height:100%;
   float:left;
   background-color:#FFF;
}



habe gehoft mir hier die 2 zu zentrieren, allerdings klappt das mit dem "right" nicht so wie ich mir das vorgestellt habe, da er nicht neben den anderen passt...wo liegt denn mein denkfehler.
Hatte auch den Einfall beide wiederum in einen DIV zu packen, allerdings wirkt sich ja das "body div" auf alle divs aus. *hu hu huu*


achja trenner soll einfach freiraum zwischen den divs sein und ich wollte kein workaround mit weisem balken etc.

und präventiv:
CS4 MC + WinXP *zwinker*


ah, bitte helft mir ich bin jung und brauche die hilfe!


Zuletzt bearbeitet von lexk am Do 19.03.2009 19:25, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 19.03.2009 19:34
Titel

Antworten mit Zitat Zum Seitenanfang

soll der trenner immer bis zum unteren Bildschirmrand ragen?
und soll deine seiten eine breite von 1000px haben?

denn dann könntest du einen wrapper um deine elemente setzen und diesem eine hintergrundgrafik geben, die diesen trennstrich simuliert.

stichwort hierzu: faux-columns

ansonsten sieh dir bitte auch die Float-Regeln an


Zuletzt bearbeitet von Kash am Do 19.03.2009 19:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 19.03.2009 19:55
Titel

Antworten mit Zitat Zum Seitenanfang

Kash hat geschrieben:
stichwort hierzu: faux-columns


Ergänzend:

http://www.positioniseverything.net/articles/onetruelayout/
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://www.google.com/search?q=css+equal+height+columns

Mit den Stichworten kannst du es auch über die Boardsuche versuchen, da findest du auch haufenweise zu …
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
lexk
Threadersteller

Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht: Männlich
Verfasst Do 19.03.2009 19:56
Titel

Antworten mit Zitat Zum Seitenanfang

ja der trenner sollte bis zum ende durchgehen und nein die seite soll 1005px haben (+5px Trenner).
mmmhh, gerade so eine lösung wollte ich vermeiden. war echt als 2 divs gedacht.
aber wenn es nicht anders geht, werde ich es wohl so machen :-/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 19.03.2009 19:59
Titel

Antworten mit Zitat Zum Seitenanfang

lexk hat geschrieben:
mmmhh, gerade so eine lösung wollte ich vermeiden. war echt als 2 divs gedacht.
aber wenn es nicht anders geht, werde ich es wohl so machen :-/


siehe mein Beitrag Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
lexk
Threadersteller

Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht: Männlich
Verfasst Do 19.03.2009 20:02
Titel

Antworten mit Zitat Zum Seitenanfang

den hatte ich da noch nicht gesehen - habe ich wohl zu langsam getippt.
danke mit deinen bin weitergekommen! Lächel mal schauen, ob ich das jetzt auch hinbringe ^^
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 19.03.2009 21:25
Titel

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
Kash hat geschrieben:
stichwort hierzu: faux-columns


Ergänzend:

http://www.positioniseverything.net/articles/onetruelayout/
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://www.google.com/search?q=css+equal+height+columns

Mit den Stichworten kannst du es auch über die Boardsuche versuchen, da findest du auch haufenweise zu …


super Links m
  View user's profile Private Nachricht senden
lexk
Threadersteller

Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht: Männlich
Verfasst So 22.03.2009 17:02
Titel

Antworten mit Zitat Zum Seitenanfang

naja mit einem kleinen workaround bin ich jetzt weiter gekommen.
Jetzt habe ich aber gleich wieder das nächste Problem:
Die Navigation wird mit imagereplacement realisiert, zumindest war es so angedacht.
Allerdings habe ich vertikale statt eine horizontale Liste mit dots.
Die einfachsten Dinge bringen mich anscheinend zu Verzweiflung - diverse Seite mit dem Thema hab ich bereits abgeklappert...

HTML
Code:
<div id="container" style="margin:auto">
   <div id="links"><img src="images/logo.png" alt="Logodingens" class="logo" /><br />
       <ul class="navi">
           <li><a href="#">Link 1</a></li>
        <li id="navigation2"><a href="#">Link 2</a></li>
         </ul>
</div>
   <div id="rechts"><img src="images/news.png" alt="News" width="69" height="16" class="news" /><br />
   </div>
</div>
</body>
</html>


CSS
Code:
body {
   background-color:#eee;
   margin: 0px;
   background-image:url(images/wrapper.gif);
   background-position:center;
   font-family:Helvetica, Arial, sans-serif;
   font-size:12px;
   color:#333;
}
#container {
   width:950px;
   height:100%;
   position:relative;
}

#links {
   width:690px;
   position:absolute;
   padding-left:15px;
   background-color:#FFF;
}
#rechts {
   width:225px;
   position:absolute;
   margin-left:710px;
   padding-left:15px;
   background-color:#FFF;
}
/* ############  NAVI  ############ */
ul li a{
   display:block;
   height:16px;
   width:55px;
   background:transparent url(images/navi_replace.png) no-repeat 0 0;
   text-indent:-509px;
}
ul li#navigation2 a {
   width:54px;
   background-position: -55px 0;
}
ul li a:hover {
   background-position: 0 -16px;
}
 
ul li#navigation2 a:hover {
   background-position: -54px -16px;
}



Wo häng ich denn da?! * Such, Fiffi, such! *


Zuletzt bearbeitet von lexk am So 22.03.2009 17:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Divs auf Seite fest zentrieren
DIVs zentrieren
[css] divs nebeneinander zentrieren
Zentrieren von floating DIVs
3 DIVs im übergeordnetem DIV zentrieren & fixieren? HELP!
Mehrere floatende DIVs zentrieren...
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.