Frage Ausrichtung von Inhalten in Divs

[jdownloader2]

Hi,
Ich bleibe momentan beim Layouten stecken. Das Grobe Layout konnte ich machen. Aber sobald ich ein "div1" im "div2" dazu noch ein "Text im div2"ausrichten muss krieg ich dies einfach nicht richtig hin.

HTML:

  <div id="content_main">
   
            <div id="content">
            <p>Text<p>
            </div>
   
            <div id="sites_main">
               <p class="sites">Seite: 1 2 3 4 5 6 7 8</p>
            </div>
   
    </div>

CSS:

#content_main {
    width: 660px ;
    height: 780px ;
    background-color:#44E756;
    float:right;
    margin-top: 20px;
    margin-bottom: 20px;
}

    #content {
        width: 660px;
        height: 740px;
        background-color: #FB72FA;
        margin-top: 0px;
    margin-bottom: 0px;
    }
   
    #sites_main {
    width: 660px;
    height: 40px;
    background-color: #B5B5B5;
    }
   
.sites {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    text-height: 24px;
    line-height: 40px;
    margin-left: 10px;
    font-weight:bold;}

nur möchte ich die Seitenzahl am "div1" ganz unten ausrichten, aber der Text soll mitig "div2" bleiben(vertical).

<div id="content_main"> -> Beinhaltet folgende Elemente :
<div id="content"> -> Kommt Text und ein Bild, kann leider die dimensionen noch nicht bestimmen.
<div id="sites_main"> -> Kommen die Seitenzahlen hin die per Hyperlink verlinkt werden.

Ich möchte nun die "sites_main" am unteren Rand der "content_main" ausrichten. Den Text(Seitenzahlen)
möchte ich vertikal Mittig des "sites_main".

Mein Problem ist das auf dem "content_main" noch text und ein bild kommt. Dies würde die Seitenzahl wieder verschieben.

http://pastebin.com/usqd6zmT -> HML
http://pastebin.com/BTL4qdq2 -> CSS

Könnte sich das jemand anschauen. Bin nun sicher schon 5h am googeln aber komme auf keine Lösung.
Vielleicht gehe ich auch komplett falsch vor.

Mfg Jdownloader2

 

[MrMurphy]

Hallo,

nix verstehn. Benutze in der Fragestellung bitte die id und class, die du auch in deinem Quelltext verwendest.

Eventuell reicht es ja dem p-Element eine Breite (width) von 100% zu geben und den Text mittels "text-align: center;" zu zentrieren.

Gruss

MrMurphy

 

[jdownloader2]

Hmm,

Da ich noch keine Antwort habe, und bis anhin noch nichts gefunden habe frage ich hier mal anderst:

Mein Problem(Bild) : http://www.bilder-upload.eu/show.php?file=3d7e39-1442772679.png

Warum wird mir die "header_title" box ca 50px nach unten geschoben ? Ich möchte diese genau über der "Header_main" haben.

Hat das damit zutun das ich ich im "wrapper" ein margin-top habe ? Wird dieser margin wert irgendwie übernommen ?

... habe gerade gemerkt das das irgendwas mit dem "border ; outset;" zu tun hat.

Kann mir hier jemand helfen ?

CSS:

#wrapper {
    width: 980px;
    height: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

#header_main {
    width: 970px ;
    height: 200px ;
    border-radius: 20px;
    border:outset;
    border-width: 5px;
    border-color:#DBB682;
    background-image:url(../img/backgrounds/background-header.jpg);
    background-size: 980px 200px;
    position:relative;
  
}
        #header_title {
        width: 970px;
        height: 200px;
        font-size: 60px;
        line-height: 200px;
        text-align:center;
        font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        color:white;
        text-shadow: 0 0 10px rgba(143,95,49,1.00), 0 0 10px rgba(143,95,49,1.00);
        font-weight: bold;
        }

 

[djheke]

Du willst uns veräppeln?!

 

[jdownloader2]

hmm ne eigentlich nicht.

aber habe es inzwischen lösen können.

* {
   margin: 0px;
   boarder: 0px;
   padding: 0px;
}

hat mein problem gelöst. Irgendwie wird bei jedem "Text" den ich einfüge mit "<p>" eine "margin-top" abstand gemacht. Was mir jedes mal die "<p>"-Box(screenshot) nach unten geschoben hat und ich wusste nicht warum. Dies hat auf jeden fall das Problem gelöst.

 

[jakestyler]

boarder

 

[jdownloader2]

boarder

Oh, ja Rechtschreibfehler machen sich nicht so gut im Code....

* {
   margin: 0px;
   border:0px;
   padding: 0px;
}