Forum Mjukvara Programmering och digitalt skapande Tråd

<div> Utan radbrytning

1 2
Skriv svar
Permalänk
Medlem
●

<div> Utan radbrytning

Jo, jag har märkt att när jag skriver in den här "<div>" taggen så börjar webbläsaren på en ny rad. Det är frustrerande, speciellt när man vill lägga till en inställning till nästa element och vill vara kvar på samma rad. Jag kan inte använda "<span>" taggen, för jag har "text-align" inställningen i min CSS-fil. Hur skriver jag in "<div>" utan att det blir en radbrytning?

Redigera
Citera flera Citera
Permalänk
Medlem
●

<div> är ett block-element, span, em etc. är inline-element. Man använder inte <div> i texter rent generellt. Du borde lära dig lite om html/css kanske.

Annars är det ju bara lira in div { display:inline; } men det lär inte gå jättebra.

Visa signatur

Tommie Hansen
Cardrop / byme

Redigera
Citera flera Citera
Permalänk
Medlem
●

<div> är som sagt ett blockelement som inte ska användas i text. Om du ens behöver använda element som <div> eller <span> bör du fundera på vad du egentligen håller på med. Om du verkligen vill ha ett blockelement som inte ger en ny rad ska du använda display: inline-block, dessutom.

Läs Webboken.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ska man använda "<p>" taggen? Också, jag tror nog att det är bättre att köra med tabell då, men när man kör tabell, hur centrerar jag den "mittre" cellen om jag inte kör med ram?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Ska man använda "<p>" taggen?

Ja.

Citat:

Ursprungligen inskrivet av heymid
Också, jag tror nog att det är bättre att köra med tabell då

Nej, nej och åter nej. Tabeller är till för tabulärdata, inget annat.

Jag rekommenderar att du förkovrar dig lite inom HTML/CSS, en bra start är W3Schools.

Visa signatur

Medlem i signaturgruppen nyliberala datahakkare med POSIX-kompatibla system.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Men "<p>" taggen ger ju också radbrytning.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Men "<p>" taggen ger ju också radbrytning.

För radbrytning är något man vill ha efter ett stycke.
Vad är det du försöker åstadkomma?

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
.Vad är det du försöker åstadkomma?

Jag vill göra nya inställningar i nästa element och fortfarande vara på samma rad. Alltså vill jag inte att nästa element ska börja på en ny rad (som div och p gör). Och som sagt, jag kan inte använda span för jag använder align.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Jag vill göra nya inställningar i nästa element och fortfarande vara på samma rad. Alltså vill jag inte att nästa element ska börja på en ny rad (som div och p gör). Och som sagt, jag kan inte använda span för jag använder align.

Ge ett exempel, jag är ganska säker på att du inte har helt rätt terminologi överallt nu.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

<html>
<style>
.example1
{
font-family:"Arial";
color:orange;
text-decoration:none;
text-align:left;
font-size:30px;
}
.example2
{
font-family:"Rockwell";
color:red;
font-size:20px;
text-align:center;
</style>
<body>
<p class="example1">Det här är normalt.</p>
<p class="example2">Det här är radbrytningen som jag inte vill ha.
</body>
</html>

Redigera
Citera flera Citera
Permalänk
Medlem
●
<p>Normal text <span>och någon annan text</span>.</p>

Jag skulle dock fundera över om det inte finns ett mer semantiskt alternativ än span. Vad är det egentligen du vill göra? Lägga betoning på texten? Använd <em>. Ska texten varna? Använd <strong>. Och så vidare. (Och seriöst, läs Webboken)

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Oj. Jag märkte nu att det börjar på en ny rad bara om jag avslutar "<p>" taggen. Det jag vill, är att lägga till en "ny" "<p>" tagg med lite andra formaterings-inställningar och fortfarande vara på samma rad, men eftersom det blir en radbrytning bara om jag avslutar det föregående "<p>":et eller fortsätter med ett nytt "<p>" så verkar det omöjligt.

Ett exempel:

<html>
<style>
.default
{
font-family:"Arial";
color:orange;
text-decoration:none;
}
</style>
<body>
<p class="default">Så här vill jag ha det, men</p>så här vill jag inte ha det.
</body>
</html>

Klistra in det i ett tomt text-dokument och spara det som html och öppna det i den webbläsare som du föredrar. Kolla på "så här vill jag inte ha det." Det står två rader under "Så här vill jag ha det, men."

EDIT: Jag la till en class nu i koden ovanför så att du kan testa.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Vet du ens vad du håller på med?

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ja, varför skulle jag inte veta det?

Här har jag ett exempel gjort i paint som visar ungefär hur jag vill att det ska se ut:

Om du klarar av att göra samma sak i HTML så ska jag ge dig applåder för det. Visa då också hur du gjorde det!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Ja, varför skulle jag inte veta det?

För att din HTML är värre än taggsoppa

Citat:

Ursprungligen inskrivet av heymid
Här har jag ett exempel gjort i paint som visar ungefär hur jag vill att det ska se ut:

Om du klarar av att göra samma sak i HTML så ska jag ge dig applåder för det. Visa då också hur du gjorde det!

Den här "centrerade" texten, ska den vara centrerad i förhållande till det utrymme som finns kvar eller i förhållande till hela sidan?

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Den här "centrerade" texten, ska den vara centrerad i förhållande till det utrymme som finns kvar eller i förhållande till hela sidan?

I förhållande till hela sidan.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

läste nyss igenom webboken. Om jag fattat rätt så om man vill markera något i texten så gör man så här: "<p> Att bygga upp en sida med frames är <strong style="color: blue;"> omodernt.</strong></p>" Så det du vill göra är att skapa en lucka i din text. Så borde du väll sätta margin-left på strong.

edit: tog lite tid att få fram meddelandet vad tvungen att testa mig fram lite.

Visa signatur

Car pc (bygglogg) | Fishtank server (galleri) | HTPC (galleri)

Redigera
Citera flera Citera
Permalänk
Medlem
●

Problemet med margin-left är att alla webbläsare inte tolkar värdet på samma sätt. Finns det något "riktigt" värde för margin-left för centrerad?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Problemet med margin-left är att alla webbläsare inte tolkar värdet på samma sätt. Finns det något "riktigt" värde för margin-left för centrerad?

auto på både left och right gör elementet centrerat, förutsatt att det är ett blockelement med bredd ≠ 100%. Men det är i förhållande till det utrymmet som finns över, inte hela sidan.

Du borde tänka igenom din struktur lite bätte, att bara lägga upp text på det sättet du vill är varken bra eller lätt, det bör finnas en lösning som inte går ut på att misshandla text-align.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Du borde tänka igenom din struktur lite bätte, att bara lägga upp text på det sättet du vill är varken bra eller lätt, det bör finnas en lösning som inte går ut på att misshandla text-align.

Ursäkta mig: misshandla?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Ursäkta mig: misshandla?

Rätt ordval är givetvis missbruka. Ursäkta mig.

Det du vill göra är inte att positionera text, utan att positionera elementen texten ligger i. Till detta har du andra verktyg så som float, position, display etc.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

kör med div o sätt display:inline ? en span e ju de som default, medans en div är block.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av =JoNaZ=
kör med div o sätt display:inline ? en span e ju de som default, medans en div är block.

Läs tråden. Dessutom, vill man ha ett inline-element ska man inte använda div från början.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag tror att jag hittade svaret! Svaret är väl att man kan bara ha en positions-inställning per rad, stämmer det?

Sen så tror jag att tabell är lite för komplicerat för mig, så jag får väl köra med &n b s p;.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Jag tror att jag hittade svaret! Svaret är väl att man kan bara ha en positions-inställning per rad, stämmer det?

Sen så tror jag att tabell är lite för komplicerat för mig, så jag får väl köra med &n b s p;.

Tror vi är fler som blir lite förvirrade nu, hur menar du med en rad? Kolla in http://www.w3schools.com/html/html_tables.asp för att lära dig mer om tabeller. Använd inte tabeller för design utan endast för tabulär data. Använd heller inte & n b s p ; för mer än ett mellanslag, använd istället span och styr den via css om du behöver mer mellanrum.

Jag förstår inte riktigt problemet du har, är det detta du vill åstadkomma?

<head>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
	min-width:800px;
}
#left {
	display:inline;
	float:left;
	width:360px;
	color:#F00;
}
#right {
	margin:0 auto;
	text-align:center;
	color:#FC0;
}
</style>
</head>

<body>
<div id="left">Den här texten är på vänster sida</div>
<div id="right">men den här texten är centrerad och har en annan formatering</div>
</body>

Alternativt med p om du ska använda detta med flödande text,

<head>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
}
.left {
	display:inline;
	float:left;
	color:#F00;
	margin:0 0.4em 0 0;
}
.right {
	margin:0;
	text-align:center;
	color:#FC0;
	width:100%;
}
</style>
</head>

<body>
<p class="left">Den här texten är på vänster sida</p>
<p class="right">men den här texten är centrerad och har en annan formatering</p>
</body>
Senast redigerat
Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Div med id, gör det att man fortsätter på samma rad? Tack så mycket i alla fall, det funkade ganska bra!

Det här med att man bara kan ha en positions-inställning per rad, är det en begränsning i html/css? Jag testade att ersätta "float:left" med "text-align:left" och då blev det radbrytning.

Jag kom själv på en annan lösning idag. Jag skrev in manuellt inställningarna för positionering. Det här är min kod i css-filen:

.ny
{
    position:relative;
    top:0px;
    bottom:0px;
    left:200px;
    right:0px;
}

Sen så skrev jag "<span class="ny">" i HTML-dokumentet. Jag visste faktiskt inte att manuell positionering funkar med span, men tydligen så gör det. Jag bekräftade det här med både Internet Explorer 8 och Firefox 3.6.

Nackdelen är att jag måste skriva "<span class="ny">" varje gång som jag vill använda det. Det räcker alltså inte med att bara skriva "<span>" andra gången. Är det här rätt eller ska jag inte behöva skriva span class varje gång?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av heymid
Div med id, gör det att man fortsätter på samma rad? Tack så mycket i alla fall, det funkade ganska bra!

Seriöst, du har ingen koll. Läs på!

Citat:

Ursprungligen inskrivet av heymid
Det här med att man bara kan ha en positions-inställning per rad, är det en begränsning i html/css? Jag testade att ersätta "float:left" med "text-align:left" och då blev det radbrytning.

Det är ingen begränsning; det är en logisk konsekvens av vad text-align faktisk ska vara. Text-align ska justera textstycken, INTE flytta runt hela element. För det har vi som sagt float etc.

Citat:

Ursprungligen inskrivet av heymid
Jag kom själv på en annan lösning idag. Jag skrev in manuellt inställningarna för positionering. Det här är min kod i css-filen:

Tekniskt sett fungerar det där, men det är ett fulhack som kommer att ge dig problem i med komplexa situationer.

Citat:

Ursprungligen inskrivet av heymid
Nackdelen är att jag måste skriva "<span class="ny">" varje gång som jag vill använda det. Det räcker alltså inte med att bara skriva "<span>" andra gången. Är det här rätt eller ska jag inte behöva skriva span class varje gång?

Det är rätt, det ska vara så. Du borde läsa på lite om klasser (som är en klassificering av element) samt även lite om hur man bör namnge klasser.

Senast redigerat
Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Vad menar du med "rad"? De enda rader jag kan tänka mig är de som finns i HTML-koden, för i den resulterande hemsidan finns det inget som kan kallas för rader.. (jag tänker mig rader som på ett linjerat papper)

Ja, om du gör en klass .ny så måste du naturligtvis använda den på varje element som ska följa de reglerna. Alternativet är att göra ändringen på alla span-element genom att ersätta .ny med span i ditt CSS. Då kommer alla <span> att följa den regeln.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Teknocide
Alternativet är att göra ändringen på alla span-element genom att ersätta .ny med span i ditt CSS. Då kommer alla <span> att följa den regeln.

Det är dock sjukt dåligt på väldigt många sätt.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Seriöst, du har ingen koll. Läs på!

HÅLL KÄFTEN! Jag håller på att lära mig HTML! Dessutom är jag ganska ung fortfarande, och just dom frågorna som jag har, finns inte svar på i den dära webboken! Jag måste också testa mig fram till vissa saker! Och du kan själv bli avstängd som användare på sweclockers om du nedvärderar människor på det där sättet!

Citat:

Ursprungligen inskrivet av You
Tekniskt sett fungerar det där, men det är ett fulhack som kommer att ge dig problem i med komplexa situationer.

Till exempel?

Redigera
Citera flera Citera
1 2
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara