mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 16:01 Benutzername: Passwort: Auto-Login

Thema: [HTML/CSS] font-size vergrößert height... vom 28.04.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [HTML/CSS] font-size vergrößert height...
Seite: 1, 2  Weiter
Autor Nachricht
Hanskrampf
Threadersteller

Dabei seit: 28.04.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 28.04.2011 12:05
Titel

[HTML/CSS] font-size vergrößert height...

Antworten mit Zitat Zum Seitenanfang

Hi.
Ich blick einfach nicht mehr durch und find nicht, warum es nicht funktioniert... vielleicht könnt ihr mir helfen.
Erstmal den Code.
CSS
Code:
body {
   background-color: #f0f0f0;
}

#wrapper {
   width: 780px;
   height: 580px;
   margin: 10px;
   border: 10px solid #fff;
   background-color: #000;
}

#kopfbereich {
   width: 760px;
   height: 99px;
   padding: 0 20px 0 0;
   border-bottom: 1px solid #fff;
}

#navibereich {
   width: 780px;
   height: 39px;
   border-bottom: 1px solid #fff;
}

#newsbereich {
   width: 129px;
   height: 380px;
   padding: 10px;
   border-left: 1px solid #fff;
   float: right;
}

#inhaltbereich {
   width: 610px;
   height: 380px;
   padding: 10px;
}

#impressumbereich {
   clear: right;
   width: 780px;
   height: 39px;
   border-top: 1px solid #fff;
}


/* Textoptionen */
p {
   color: #fff;
   font-size: 12px;
   font-family: "Lucida Console", Monaco, monospace;
}

p.imp {
   font-size: 9px;
   text-align: center;
}

p.kopf {
   font-size: 24px;
   text-align: right;
   line-height: 250%;
}

und 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" />
    <link rel="stylesheet" type="text/css" href="Unbenannt-2.css" />
</head>

<body>
   <div id="wrapper">
       <div id="kopfbereich">
           <p class="kopf">
               24px Text
           </p>
        </div>
       
        <div id="navibereich">
        </div>
       
        <div id="newsbereich">
        </div>
       
        <div id="inhaltbereich">
            </p>
        </div>
       
        <div id="impressumbereich">
            <p class="imp">
               Diese Seite wird betrieben von: <br />
                Kontaktieren? <a href="" alt="E-Mail schicken">Ja</a> <a href="" alt="keine E-Mail schicken">Nein</a>
            </p>
        </div>
    </div>
</body>
</html>


Egal was ich versuche, der Text von <p class="kopf"> vergrößert <div id="kopfbereich"> um die Schriftgröße und schiebt damit dann das Impressum nach unten raus.
Wahrscheinlich ist es irgendwas billiges, wo ich nen Fehler reinhab, aber ich find einfach nix.

Danke schonmal im Vorraus für die Hilfe.
  View user's profile Private Nachricht senden
mokleini

Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: Männlich
Verfasst Do 28.04.2011 12:35
Titel

Antworten mit Zitat Zum Seitenanfang

[code]#kopfbereich {
width: 760px;
height: 99px;
padding: 0 20px 0 0;
border-bottom: 1px solid #fff;
}[/code]

mach das height:99px; kleiner, dann sollte es klappen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Do 28.04.2011 12:40
Titel

Antworten mit Zitat Zum Seitenanfang

http://img713.imageshack.us/i/zudoof.jpg/

Gehe ich richtig in der Annhame, dass du den unteren Bereich meinst, der nicht die entsprechnede Zeilenhöhe hat, damit man sieht was da steht?
 
Hanskrampf
Threadersteller

Dabei seit: 28.04.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 28.04.2011 12:40
Titel

Antworten mit Zitat Zum Seitenanfang

Joa, könnte ich, aber das kann ja auch nicht die Lösung sein...
dass ich dann jedesmal den #kopfbereich kleiner/größer mach, wenn ich noch was mit reinschreib oder Schriftgröße änder.
Ich würd halt gern wissen, woran es liegt, kann ja eigentlich nicht sein, dass das einfach größer gemacht wird, oder?
  View user's profile Private Nachricht senden
Hanskrampf
Threadersteller

Dabei seit: 28.04.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 28.04.2011 12:41
Titel

Antworten mit Zitat Zum Seitenanfang

Jein.
Der untere Bereich wird rausgeschoben, weil der obere, wo "24px Text" steht, um die Schriftgröße, also 24px größer gemacht wird.
  View user's profile Private Nachricht senden
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Do 28.04.2011 12:49
Titel

Antworten mit Zitat Zum Seitenanfang

Das ganze CSS ist ein reines Schlachtfeld

Ich baue das mal so wie du es prinzipell immer her nehmen kannst - dauert einen Moment.
 
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Do 28.04.2011 13:11
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hab den Fehler:

Innerhalb deines Wrapper sagste mach ne Höhe - wäre auch richtig, wenn man richtig grechnet hätte.

Erstmal die 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" />
<link rel="stylesheet" type="text/css" href="unbenannt.css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<p>24px Text</p>
</div>

<div id="nav">&nbsp;</div>

<div id="news">&nbsp;</div>

<div id="content">&nbsp;</div>

<div id="footer">
<p>Diese Seite wird betrieben von:<br />Kontaktieren? <a href="" alt="E-Mail schicken">Ja</a> <a href="" alt="keine E-Mail schicken">Nein</a></p>
</div>
</div>
</body>
</html>


Uns nun die CSS:

Code:

/* Globale Sets */

body { background-color: #f0f0f0; }

p { color: #fff; font:12px normal Lucida Console, Monaco, Monospace, sans-serif; }

/* Area Sets */

#wrapper { width: 780px; margin: 10px; border: 10px solid #fff; background-color: #000; }

#header { width: 760px; height: 99px; padding: 0 20px 0 0; border-bottom: 1px solid #fff; }

#header p {font-size:24px; text-align:right; line-height:250%; }

#nav { width: 780px; height: 39px; border-bottom: 1px solid #fff; }

#news { width: 129px; height: 380px; padding: 10px; border-left: 1px solid #fff; float: right; }

#content { width: 610px; height: 380px; padding: 10px; }

#footer { clear: both; width: 780px; height:39px; border-top: 1px solid #fff; }

#footer p { font-size: 9px; text-align: center; line-height:10px; height:39px; }
 
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Do 28.04.2011 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

Feedback???
 
 
Ähnliche Themen Font-size: 100%
Font Size in IE vs Firefox
[html/css] img width und height [solved]
[CSS] Height hin, Height her - Größe von DIV's
formularfeld, maxlength und size
background-size: cover; und ios
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.