nicht angemeldet
Text im DIV positionieren
0 0 0 0 
Der Martin
0
0 Tabellenkalk
Text im DIV positionieren
Hallo sehr geehrte Forum Leser- und Schreibe,
ich habe ein Problem bei der Positionierung eines Textes in einem DIV, wo ich nicht weiterkomme:
Der gelbe Text sollte im roten Div stehen und nicht unterhalb.
Anbei der Quellcode und Bild
Vielen Dank für einen Denkanstoß und schönen Sonntag
Willi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>beispiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style_test.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href='https://fonts.googleapis.com/css?family=Asap' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Noticia+Text' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="java.js"></script>
</head>
<body>
<div id="anfrage_formular"> Beschreibung Zeile 1 <div id="anfrage_form01"> text test tet ssfasfasdfasdfasdfda </div>
Beschreibung Zeile 2 <div id="anfrage_form02"> text test tet ssfasfasdfasdfasdfdaasdf</div>
</div>
</body>
</html>
body {
font-family: Source Sans Pro;
margin: 0;
padding: 0;
background-color: #FFFFFF;
overflow-y:scroll;
}
#anfrage_formular {
margin-left: 233.5px;
width:557px;
height:500px;
text-align:left;
font-family: 'Asap', sans-serif;
font-size:18px;
line-height:65px;
color:#FFFFFF;
background-color:#4B5945;
}
#anfrage_form01{
margin-left: 200px;
margin-top:-40px;
width:357px;
height:25px;
color:yellow;
background-color:red;
}
#anfrage_form02{
margin-left: 200px;
margin-top:-40px;
width:357px;
height:25px;
background-color:red;
}
-
Hallo
Du solltest erst einmal die Grundlagen für aktuelles HTML / CSS lernen. So wirst du nur von einem Problem zum nächtsten stolpern.
Texte sollten nur in den dafür vorgesehenen Containern stehen, wie p, h1 bis h6, li, dt, dd, label und so weiter. Dann können sie auch positioniert werden.
div-Container dürfen nur verwendet werden wenn es keine spezielleren gibt.
px gibt es nur in ganzen Zahlen. Kommawerte sind unsinnig, da jeder Browser die Nachkommastellen anders interpretieren kann.
Gruss
MrMurphy
-
Hallo MrMurphy, danke für deinen Beitrag. Zu Punkt 1: ja, ich bin hier zum lernen. Der Rest löst mein Problem nicht, ein kleines Beispiel "so wird's gemacht" würde schon helfen.
Gruß Willi
-
Hallo Willi,
Der Rest löst mein Problem nicht, ein kleines Beispiel "so wird's gemacht" würde schon helfen.
soll es in diese Richtung gehen? http://codepen.io/anon/pen/jqMmXL
<div id="anfrage_formular"> <div class="zeile1"> <p>Beschreibung Zeile 1</p> <p>Ich bin ein Test, Test, Test, Test</p> </div> <div class="zeile2"> <p>Beschreibung Zeile 2</p> <p>Ich bin ein Test, Test, Test, Test</p> </div> </div>#anfrage_formular { width: 600px; margin: 0 auto; background: green; color: #fff; height: 600px; } .zeile1, .zeile2 { padding: 1em; } .zeile1 p:first-child { display: inline-block; width: 182px; padding: 0.5em; } .zeile1 p:last-child { display: inline-block; width: 340px; background: red; padding: 0.5em; color: #fff; } .zeile2 p:first-child { display: inline-block; width: 182px; padding: 0.5em; } .zeile2 p:last-child { display: inline-block; width: 340px; background: red; padding: 0.5em; color: #fff; }Natürlich sollten später keine PX Angaben verwendet werden. Zum Testen und verstehen ist dieses allerdings völlig in Ordnung.
Auch dürfen weiterhin gerne divs verwendet werden. Nur die Suchmaschinen mögen es, wenn man ihnen direkt mitteilt um was es sich handelt bei dir wäre eine <section> denken ich mal angebracht. Um dieses genauer zu beurteilen zu können, sollte man natürlich den ganzen Aufbau der Seite kennen.
-
Hallo,
Natürlich sollten später keine PX Angaben verwendet werden. Zum Testen und verstehen ist dieses allerdings völlig in Ordnung.
meiner Ansicht nach ist es am besten, Maß-Vorgaben ganz wegzulassen. Ob man nun px oder em oder Prozente oder was auch immer verwendet - die "von Haus aus" gegebene Flexibilität des Layouts wird damit immer eingeschränkt. Klar, manchmal muss man der Flexibilität Grenzen setzen. Aber bitte mit Fingerspitzengefühl.
Auch dürfen weiterhin gerne divs verwendet werden. Nur die Suchmaschinen mögen es, wenn man ihnen direkt mitteilt um was es sich handelt bei dir wäre eine <section> denken ich mal angebracht. Um dieses genauer zu beurteilen zu können, sollte man natürlich den ganzen Aufbau der Seite kennen.
Genau. Und vielleicht erkennt man dann auch: Manchmal ist eine Tabelle tatsächlich eine Tabelle.
So long,
Martin -
Hallo und Danke! Super Lösung mit den Pseudoklassen-Selektoren. Genau so soll es Aussehen. Nochmals Danke an alle die gepostet haben.
-
-
-
-
Hallo,
Der gelbe Text sollte im roten Div stehen und nicht unterhalb.
Dass der Text das tut, liegt an den Werten von line-height und height der beteiligten Container. Du hast da irgendwie haufenweise Angaben festgelegt, anscheinend ohne richtig zu wissen warum. Überall dort, wo du px verwendest, solltest du erstmal die Angaben rausnehmen und den Browser machenlassen.
Gruß
Kalk-
"Gelöst" Danke Kalk für deine Tipp, das line-height des äusseren Divs war das Problem. Gruß Willi
-