Css <p> kein zeilenumbruch
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansicht
aussehen
auszeichnung
behoben danke
blocken
code
element
folgendes code
http
kleiner hinweis
komplette verwirrung
komplikation
stelle
tag
text
tip
tun
umstand
url
zeile
-
Hallo,
ich hab folgendes so angeordnet und hab dann verschiedene teile, die ich mit <p> tags aufteilen will:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .title{ background: #333; position: relative; width: 500px; height: auto; border-radius: 3px; padding: 4px 10px 4px 10px; } .plus{ background: #6F8A00; border-radius: 3px; padding: 0px 5px 0px 5px; text-align: center; text-decoration:none; color: #000; } </style> </head> <body> <p> <div class="title"> <input type="text" value="Sport" /> <div style="text-align: right;"><a href="#" class="plus" >+</a></div> </div> </p> </body> </html>
Jetzt ist aber das + eine zeile weiter unten. Wie kann ich das beheben? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das p-Tag ist eigentlich komplett überflüssig, bzw. sogar falsch verwendet., da es prinzipiell als Element zur Textformatierung gedacht ist.
Ergänze die CSS-Class "plus" um ein "float:right;" und reduziere deinen Html-Code des Body auf Folgendes:
<body> <div class="title"> <a href="#" class="plus" >+</a> <input type="text" value="Sport" /> </div> </body>
:
Beitrag zuletzt geändert: 4.7.2013 13:40:20 von fatfreddy -
Ok, sry, komplette Verwirrung meinerseits. Ich habs mit float: right probiert, der Zeilenumbruch ist weg, aber das Plus hängt noch an der selben Stelle.
Beitrag zuletzt geändert: 4.7.2013 17:04:18 von c143 -
c143 schrieb:
Ok, sry, komplette Verwirrung meinerseits. Ich habs mit float: right probiert, der Zeilenumbruch ist weg, aber das Plus hängt noch an der selben Stelle.
Dann hast Du wohl was falsch gemacht. Wenn Du meine Tipps umsetzt, sollte es so aussehen: *click*
hpage schrieb:
Der <p> tag ist da, um den Text in eine neue Zeile zu schreiben.
Nein, ist es nicht! Das p-Tag dient ausschließlich zur Auszeichnung von Textabsätzen.
Der Zeilenumbruch nach einem p-Tag ist dem Umstand geschuldet, daß es sich um ein Blockelement handelt.
Noch ein kleiner Hinweis an c143: Obwohl es sich um ein Blockelement handelt, darf das p-Tag keine anderen Blockelemente (z.B. DIVs) enthalten.
Beitrag zuletzt geändert: 4.7.2013 17:35:51 von fatfreddy -
fatfreddy schrieb:
c143 schrieb:
Ok, sry, komplette Verwirrung meinerseits. Ich habs mit float: right probiert, der Zeilenumbruch ist weg, aber das Plus hängt noch an der selben Stelle.
Dann hast Du wohl was falsch gemacht. Wenn Du meine Tipps umsetzt, sollte es so aussehen: *click*
hpage schrieb:
Der <p> tag ist da, um den Text in eine neue Zeile zu schreiben.
Nein, ist es nicht! Das p-Tag dient ausschließlich zur Auszeichnung von Textabsätzen.
Der Zeilenumbruch nach einem p-Tag ist dem Umstand geschuldet, daß es sich um ein Blockelement handelt.
Noch ein kleiner Hinweis an c143: Obwohl es sich um ein Blockelement handelt, darf das p-Tag keine anderen Blockelemente (z.B. DIVs) enthalten.
Mein momentanes Projekt ist bisschen weiter als nur mein Code Beispiel, hatte deshalb noch komplikationen im sonstigen CSS, aber hab das mittlerweile behoben. Danke für die Hilfe. -
Ich persönlich mache Zeilenumbrüche immer mit dem </br> tag. Ist meiner Ansicht nach das einfachste :)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
