Probleme mit div design (div wird bei overflow: hidden verschoben) ...

Status
Nicht offen für weitere Antworten.

Biergamasda

Erfahrenes Mitglied
Hallo Leute

Bin grad dabei mir ne page zu basteln.
http://biergamasta.bi.ohost.de/hp

die Seite is mit Ajax aufgebaut. jetzt habe ich dabei ein paar Probleme.

1.
wenn ich beim content bereich (der weiße Bereich in der Seitenmitte) ein
overflow: hidden;
dazuschreibe, wird der Bereich nach rechts verschoben und ist nicht mehr da wo er jezt ist, sprich sein sollte.

2. wenn man auf Gästebuch geht, wird nur das erste Datum richtig angezeigt. Dazu hätte ich noch die Frage, welchen Datentyp in mysql ich verwenden muss, wenn ich mit time() einen Timestamp reinschreiben will. jetzt habe ich datetime, jedoch wird nichts eingefügt wenn ich time() reinschreiben will.

Vielen Dank schon mal im Voraus, hoffe ihr findet euch in den sourcen etwas zurecht.


//edit

beim Gästebuch hab ich noch eine Frage, und zwar bzgl des "antwoten" buttons
1. wird dieser nicht richtig gefloatet, sondern der Text läuft einfach durch (bzw unter) den button, und ich kann mir nicht erklären wieso. Außerdem habe ich mit der positionierung irgendwie kleinere Probleme...

source:
HTML:
foreach($entrys as $entry) {
			?>
            	<div class="entryContainer">
                    <div class="author"><?php echo $entry['author']; ?></div>
                    <div class="date"><?php echo $entry['date']; ?></div>
                    <div class="message"><input type="button" class="reply" value="antworten" onclick="makeGbEntry()" />
                        <?php echo $entry['message']; ?>
                    </div>					
                </div>                
            <?php			
		}

und die formatierung
CSS:
div.entryContainer {
	width: 80%;
	margin: 10px auto;
	border: 1px dashed #847562;
}

div.author {
	color: #65533b;
	font-weight: bold;
	float: left;
	margin-left: 5px;
	height: 20px;		
	line-height: 20px;
	vertical-align: middle;
}

div.date {
	color: #65533b;
	font-weight: bold;
	float: right;
	margin-right: 5px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}

div.message {
	color: #65533b;
	border-top: 1px dashed #847562;
	padding: 5px;
	margin-top: 20px;
}

input.reply {
	color: #65533b;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: right;
        margin-right: -5px;
        margin-bottom: -5px;
	line-height: 15px;
	vertical-align: middle;
	height: 15px;
	border-top:	1px dashed #847562;
	border-left: 1px dashed #847562;
	border-bottom: none;
	border-right: none;
}
 
Zuletzt bearbeitet:
Hi,

die modernen Browser interpretieren bei der Hinzunahme der overflow-Eigenschaft die margin-left-Deklaration anders, und beziehen sich auf das danebenliegende Element. In diesem Fall muß der margin-left-Wert für das DIV content auf 52px herabgesetzt werden.

Zur zweiten Frage bzgl. des Timestamps kann ich dir leider nichts sagen - du wirst dich also damit an die Profis im PHP- oder MySQL-Board wenden müssen.

Beim Gästebucheintrag, der, wenn er länger ist, den "antworten"-Button unterwandert, solltest du den Text in ein seperates Blockelement packen und ihm einen entsprechenden rechten Außenabstand verpassen, damit es den Button "umfliesst".
 
Naja, das hab ich mir zuerst ja auch so gedacht, aber... ich hätte es gerne so, dass der Text in der box ist, und der antworten button rechts unten bleibt. der Text soll jedoch die komplette box ausfüllen, also, ober dem button bis ganz rechts, und auf der höhe des Buttons nur bis zu diesem. Wenn ich nun ein eigenes div für den Beitrag einfüge, dann kann ich dies (meines Wissens) nicht machen. Könnte dann nur entweder allgemein bis zum antworten button gehen, oder nur über diesem schreiben.

vieleicht hast du ja dafür eine Lösung... ^^

danke nochmal

PS:
wegen dem mysql php zeugs wollte ich nur keinen eigenen thread aufmachen, aber da du mir das ja geraten hast werde ich dies gerne tun :)
 
Dann schau dir mal diesen Vorschlag an:

Code:
div.entryContainer {
        width: 80%;
        margin: 10px auto;
        border: 1px dashed #847562;
        position:relative;
}

input.reply {
        color: #65533b;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: 15px;
        height: 15px;
        border-top: 1px dashed #847562;
        border-left: 1px dashed #847562;
        border-bottom: none;
        border-right: none;
        position:absolute;
        bottom:0;
        right:0;
}
Code:
<div class="entryContainer">
     <div class="author">tut-nix-zur-sache</div>
     <div class="date">2007-06-20 12:22:06</div>
     <div class="message"><input class="reply" value="antworten" onclick="makeGbEntry()" type="button">
          <p>so, und jetzt folgt mal eine längere Textpassage, um zu gucken, was mit dem "antworten"-Button geschieht...</p>
     </div>
</div>
 
ah, perfekt, so funktionierts genau so wie ichs wollte... :)

tausend Dank, falls noch irgendwelche Fragen auftreten sollten schreib ich diese hier rein... ;)

MFG Masda
 
Status
Nicht offen für weitere Antworten.
Zurück