[Hilfe] Bei Code

gmartino27 · 20.07.2011

hallo leute

design noch nicht fertig, aber habe zwei fragen:

wie kann ich die seite zentrieren
wie kann ich die rand-ecken abrunden.

vielen dank für eure hilfe. habe es alleine versucht, aber habe keine lösung gefunden.

index.html

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Meine tolle Firma</title>
<link href="demo.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="holder">
    <div id="header">
        <img class="logo" src="images/logo.jpg" weight="100" height="100" alt="logo">
        <h1 class="callout">text</h1>
    </div>
    <div id="nav">
    <ul>
        <li><a href="#">Link Eins</a></li>
        <li><a href="#">Link Zwei</a></li>
        <li><a href="#">Link Drei</a></li>
        <li><a href="#">Link Vier</a></li>
    </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    
    <div class="brclear"></div>
    
    <div id="footer">
        <p>&copy;Copy</p>
    </div>
</div>
</body>
</html>

demo.css

HTML:

@charset "utf-8";

body{
    font: 100% Arial, Verdana, Helvetica, sans-serif;
    color: #000000;
    background: #d9e1ee;
    margin: 10px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    border-color: #86a5c7;
}

#holder {
    width: 900px;
    background: #86a5c7;
    margin: 0 auto 0 auto;
}

#header{
    width: 100%;
    height: 150px;
    background: #085ba7;
    margin: 0;
    padding: 0;
}

#nav{
    background: #04294b;
    width: 100%;
    height: 35px;
    float: top;
    margin: 0;
    padding: 0;
}

#content{
    background: #86a5c7;
    padding: 15px;
}

#footer{
    background: #04294b;
    padding: 5px;
    border-top: 1px solid #877D6C;
    font-size: 80%;
    color: #FFFFFF;
    text-align: center;
}

.logo{
    margin: 0;
    padding: 20px 0 0 20px;
    float: left;
}

.callout{
    font: bold 130% Arial, Verdana, Helvetica, sans-serif;
    color: #FFFFFF;
    margin: 0;
    padding: 120px 0 0 470px;
}

.brclear{
    clear: both;
    height: 0;
    margin: 0;
    font-size: 1px;
    line-height: 0px;
}

p{
    font-size: 100%;
}

#content p{
    line-height: 130%;
}

#nav ul{
    background-color: transparent;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 80%;
}

#nav ul li{
    float: left;
    margin: 0;
    padding: 5px 0 0 5px;
    width: 100px;
}

#nav ul li a{
    background-color: #085ba7;
    color: #FFFFFF;
    text-align: center;
    display: block;
    padding: 4px 0 4px 4px;
    text-decoration: none;
    height: 1%;
}

#nav a:hover, #nav a:focus{
    background-color: #DCCBAC;
    color: #FFFFFF;
    font-weight: bold;
    border-left-width: 6px;
    border-left-style: solid;
    border-left-color: #ADA189;
    border-right-width: 6px;
    border-right-style: solid;
    border-right-color: #ADA189;
}

Myhar · 20.07.2011

AW: [Hilfe] Bei Code

Wie intensiv hast du denn ?
Oder fehlt es dir einfach an den Schlagwörtern für eine ?

L. G.

Pixelverwender · 20.07.2011

AW: [Hilfe] Bei Code

mit

Code:

margin: auto;

Ansonsten mit der PSD-Tutorials-internen Suchfunktion fürs Forum mit dem Suchbegriff „Seite zentrieren“.

Runde Ecken mit CSS:

Hätte Tante „G“ innerhalb von 5 Sekunden auch gewusst.

gmartino27 · 20.07.2011

AW: [Hilfe] Bei Code

hmmm leute wirklich sehr lustig...

klar kann ich selber suche und wenn es funktionieren würde, hätte ich nicht gefragt.
das mit dem zentrieren funktioniert leider nicht.

Pixelverwender · 20.07.2011

AW: [Hilfe] Bei Code

gmartino27 schrieb:
hmmm leute wirklich sehr lustig...

klar kann ich selber suche und wenn es funktionieren würde, hätte ich nicht gefragt.
das mit dem zentrieren funktioniert leider nicht.

Ein DIV, in welches Du die gesamte Seite packst.
Diesem gibst Du "margin: 0 auto;" und fertig.
Und schmeiß vor allem mal Deine absolute Positionierung raus.

Weitere Zentrierungsmöglichkeit (auch vertikal): http://d-graff.de/fricca/center.html

Myhar · 21.07.2011

AW: [Hilfe] Bei Code

Zuerst sagen, man hat nichts gefunden, nur um dann zuzugeben, dass man nicht fähig genug war, die Lösungen einzubauen finde ich auch gut :-D
Mehr als das, was in den Suchergebnissen steht kann man dir auch nicht sagen. Und ohne, dass du dein Problem konkret erläuterst wird dir keiner weiterhelfen können. "Es geht nicht" ist keine Fehlerbeschreibung

Du hast geschrieben, dass das zentrieren nicht funktioniert... Funktionieren die runden Ecken?

gmartino27 · 21.07.2011

AW: [Hilfe] Bei Code

Pixelverwender schrieb:
Ein DIV, in welches Du die gesamte Seite packst.

diesen satz hat mir geholfen. hatte nicht verstanden, dass ich nicht mit dem body arbeiten muss, sondern die "seite" (bei mir div holder) ändern muss.

vielen dank.

aydesign · 27.07.2011

AW: [Hilfe] Bei Code

ist es wahr das mit css erstellte runde ecken im Internet Explorer nicht sichtbar sind?

Myhar · 27.07.2011

AW: [Hilfe] Bei Code

Nach :
Hier ist deine Antwort

BLW · 27.07.2011

AW: [Hilfe] Bei Code

Für Runde Ecken in CSS finde ich auch folgende Websites sehr hilfreich:

http://www.css-border-radius.pascal-seven.de

http://css3generator.com

Viel Spaß beim ausprobieren.