Homepage - Probleme mit CSS

A R 9 9

Semiprofi
Thread Starter
Mitglied seit
07.12.2007
Beiträge
23.652
Ort
Ruhrpott
Hallo Wissende,

ich habe zwei Probleme:

Nr.1:
mit folgender neuer Page bin ich beschäftigt: http://r2f2.de/versuch/4fun.htm

Hier die CSS-Datei:
Code:
body {
	margin: 0;
	padding: 0;
	background: #280F00 url(images/img1.gif) repeat-x;
	font-family: "Verdana", Tahoma, Arial;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #FFFFFF;
}

p, ul, ol {
	margin-bottom: 1.6em;
	line-height: 180%;
}
p {
}
ul {
}
ol {
}

hr { 
	display: none;
}

a {
	color: #FFFF96;
	text-decoration: none;
}
a:hover {
	text-decoration: overline;
	color: #00FF00;
	cursor: crosshair;
}

#topnav {
	width: 1000px;
	margin: 0 auto;
	padding-top: 10px;
	text-align: right;
}
#topnav a {
	padding: 0 2px;
	text-decoration: none;
	font-family: "Arial", Tahoma, Verdana;
	font-size: 0.8em;
	color: #FFDE22;
}
#topnav a:hover {
	text-decoration: none;
	background: #00FF00;
	color: #FF0000;
	cursor: crosshair;
}

#bart {
	position: absolute;
	float: right;
	padding: 336px 0 0 445px;
}
#witz {
	position:absolute;
	float: right;
	padding: 120px 0 0 740px;
}

#header {
	width: 1000px;
	height: 100px;
	margin: 0 auto;
}
#logo h1 {
	color: #FFEBD7;
	padding-top: 5px;
	font-size: 32px;
	font-style: italic;
	font-family: "Times New Roman", Courier New, Courier;
	letter-spacing: 0.2em;
}

#menu {
	width: 1000px;
	height: 50px;
	margin: 0 auto;
}
#menu ul {
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;
}
#menu li {
	display: inline;
}
#menu a {
	display: block;
	float: left;
	padding: 0 20px 0 10px;
	background: url(images/img2.gif) no-repeat left center;
	text-align: center;
	text-decoration: none;
	font-family: "Times New Roman", Courier New, Sans-Serif;
	font-size: 150%;
	color: #FFFF96;
}
#menu a:hover {
	color: #00FF00;
	background: url(images/img2a.gif) no-repeat left center;
	cursor: crosshair;
}
#menu .active a {
	color: #280F00;
	background: url(images/img2b.gif) no-repeat left center;
}

#page {
	clear: both;
	width: 1000px;
	margin: 0 auto 20px auto;
	padding: 300px 0 0 0;
	background: url(images/top.jpg) no-repeat;
}
#box1 {
	float: right;
	width: 500px;
	padding: 5px 5px 5px 5px;
}
#box2 {
	float: left;
	width: 500px;
	padding: 5px 5px 5px 5px;
}

Die für mich bislang unlösbare Schwierigkeit:
Die Seite hat eine feste Breite von 1000px - aber was muß ich stricken, damit sich die Textpassage ebenfalls daran hält ???

Noch besser wäre es, wenn sich das Textfeld in zwei Hälten von je 500px teilen lassen würde, also quasi 2 Spalten nebeneinander.

Meine Versuche mit "div-boxen" scheiterte kläglich.

Problem Nr.2:
ich habe NULL Ahnung von CSS oder Programmierenn o.ä.
Ich suche mir ein paar Seiten aus dem Internet und übernehme dann diverse Teile für die neue Seite. Letztendlich funzelt dann alles irgendwann und irgendwie zusammen ...
nur diesmal komme ich einfach nicht weiter.
Weder "margin" noch "padding", nix funktioniert :(

Also Leute, bitte nicht auslachen, sondern GANZ LEICHT VERSTÄNDLICH erklären - noch besser die vorhandenen Texte für copy&paste abändern ;)

Dank im voraus !
 
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
Die 2 Spalten gehen so:

Code:
<div style="float:left; width:500px;">Test1</div>
<div style="float:right;">Test2</div>
 
Hmm, funktioniert zum Teil.

Mit dem Kurztext "Test1 + Test2" wird Test1 in der linken Spalte angezeigt, Test2 wird ganz außen rechts angezeigt.
Erweiter ich Test1 + 2 jedoch um zig Buchstaben, werden keine Spalten mehr angezeigt; Test1 und Test2 erscheinen untereinander, wobei der gewolllte rechte Rand wiederum nicht eingehalten wird ...

So sollte es aussehen:
text.jpg
 
Zuletzt bearbeitet:
Moin,

hier bitteschön:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#wrapper {
	width:1000px;
}
.container {
width:485px;
float:left;
text-align:justify
}
.left {
padding-right:15px;
}
.right{
padding-left:15px;
}

-->
</style>
</head>
<body>
<div id="wrapper">
	<div class="container left">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus ullamcorper ligula. Morbi dolor. Nam et est a eros tempus dapibus. Morbi rutrum, risus et dictum scelerisque, arcu risus pulvinar tortor, ac porta erat dolor ac urna. Donec a lacus. Maecenas tincidunt quam in felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ultrices posuere mi. Praesent facilisis, tellus et porta hendrerit, neque pede fermentum velit, id rhoncus elit neque quis purus. Integer ac justo id diam gravida pellentesque. Sed lorem. Nam rhoncus facilisis pede. Suspendisse blandit arcu sit amet augue. Sed vel pede vel quam congue eleifend.
	</div>
	<div class="container right">
	Nam dignissim vehicula ipsum. Nullam commodo diam a libero. Quisque varius. Cras lectus diam, sollicitudin vel, hendrerit pellentesque, viverra a, nunc. Morbi iaculis libero eu nulla. Aenean vel ligula ut quam rhoncus tempus. Sed tempor, arcu vel dignissim blandit, eros pede ullamcorper justo, in facilisis tortor sem at sapien. In ullamcorper faucibus urna. Aliquam quam. Sed metus sem, faucibus ut, bibendum sit amet, malesuada vel, tortor. Proin eget nisi. Nunc eu ligula a diam placerat accumsan. In a tellus quis velit ultricies aliquam. Morbi pretium. Phasellus congue nibh sit amet tortor.
	</div>
	<div style="clear:left;"></div>
</div>
</body>
</html>
Hab einfach mal nen Abstand von 30px zwischen den 2 Zeilen gesetzt damit der Inhalt auch noch lesbar ist ;)
Das CSS natürlich in einem externen Stylesheet einbinden und nicht direkt in der HTML Datei.

Wenn fragen aufkommmen ruhig stellen ich beiß nicht - jeder fängt mal klein an.

Gruß TrOuble
 
Zuletzt bearbeitet:
Riesen-(teil-)Erfolg :)

So schaut's aus:
gut.jpg


Aber warum ist nach unten hin so viel Leerraum ?
 
Frage beantwortet. Lösung gefunden: Der kann nicht richtig mit CSS umgehen.
 
Ich habe mich auch gewundert, daß keine farbigen Scrollbalken angezeigt werden - das kann der IE7 scheinbar auch nicht :-(

Meinen herzlichsten Dank für deine Hilfestellung ! ! !
 
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh