[CSS] Combinatie botsing - Softwareontwikkeling

zaterdag 18 december 2004 11:14

Acties:

Topicstarter

De volgende 2 codes botsen met elkaar. Ik heb echter geen idee waarom. De 1e code over-ruled de 2e code. Heeft iemand enig idee wat ik fout doe?

code:

p
{
position: absolute;
top: 75px;
left: 55px
}

botst met

code:

1	p.margin {margin-right: 125px}

totaal ziet het er zo uit

code:

<style type="text/css">
p.margin {margin-right: 125px}

p
{
position: absolute;
top: 75px;
left: 55px
}
</style>

/edit

- Wat gebeurt er?
Alleen de 1e code word gebruikt. Die zorgt ervoor dat de text op een andere plek start dan de standaard plek. Hij begint dus op 75px vanaf boven en 55px vanaf links.

- Wat gebeurt er niet?
Code 2e word niet gebruikt. Deze zorgt ervoor dat de rechter margin op 125px ligt. De text zou moeten kappen bij 125px vanaf de rechter kant.

- Wat had je verwacht dat er zou gebeuren?
Allebei de codes hadden tegelijk gebruikt moeten worden.

- Waar baseer je je verwachtingen op?
Ik heb beide codes apart getest en dan doen ze het wel.

De text haal ik als volgt aan:

code:

1
2
3

<p class="margin">
text
</p>

Totaal ziet er tot nu toe zo uit:

code:

<html>

<head>
<title>SMD</title>
<style type="text/css">
p.margin {margin-right: 5cm}

p
{
position: absolute;
top: 75px;
left: 55px
}
</style>
</head>

<body background="smdbackground.gif">
<script type="text/javascript">


function Go(){return}

</script>
<script type="text/javascript"
src="exmplmenu_var.js"></script>
<script type="text/javascript" src="menu_com.js"></script>
<font
face="Arial" color="#ffffff">

<p class="margin">
Text
 </p>
</font>
</body>
</html>

[ Voor 70% gewijzigd door Loona35 op 18-12-2004 11:30 ]

zaterdag 18 december 2004 11:22

Acties:

Verwijderd

Wat je fout doet, is dat je geen goede vraag stelt.
- Wat gebeurt er?
- Wat gebeurt er niet?
- Wat had je verwacht dat er zou gebeuren?
- Waar baseer je je verwachtingen op?

zaterdag 18 december 2004 11:25

Acties:

Loona35

Topicstarter

Verwijderd schreef op zaterdag 18 december 2004 @ 11:22:
Wat je fout doet, is dat je geen goede vraag stelt.
- Wat gebeurt er?
- Wat gebeurt er niet?
- Wat had je verwacht dat er zou gebeuren?
- Waar baseer je je verwachtingen op?

zie edit

zaterdag 18 december 2004 11:28

Acties:

Verwijderd

Gebruik je het wel als volgt?:

code:

1	<p class="margin">Hier jouw tekst</p>

Geef anders eens de hele source misschien is er nog wat anders wat er fout gaat.

zaterdag 18 december 2004 11:33

Acties:

CH4OS

It's a kind of magic

Cascading Stylesheet:

1	p.margin {margin-right: 5cm}

cm is voor zover ik weet geen property van / voor CSS, dus ik denk, dat je een andere zal moeten zoeken, zoals px, em of %...

zaterdag 18 december 2004 11:34

Acties:

OnTracK

Ik ben nogal CSS-noob, maar:
De margin is de afstand die een element tot het volgende element bepaald. Maar met een position: absolute; zijn er geen andere elementen meer die invloed uitoefenen op de jouwe.

kortweg: maak van die margin-right eens een padding-right
Ik denk dat dat is wat je wil bereiken

[ Voor 17% gewijzigd door OnTracK op 18-12-2004 11:38 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

zaterdag 18 december 2004 11:34

Acties:

Verwijderd

GJ-tje schreef op zaterdag 18 december 2004 @ 11:33:
Cascading Stylesheet:
1
p.margin {margin-right: 5cm}
cm is voor zover ik weet geen property van / voor CSS, dus ik denk, dat je een andere zal meoten zoeken, zoals px, em of %...

In de topic start staat het wel als 125px.

zaterdag 18 december 2004 11:37

Acties:

crisp

Devver

Pixelated

Overigens kan en mag je een paragraaf niet in een font-tag nesten. Font-tags zijn ook deprecated en dien je dus ook niet meer te gebruiken.

Intentionally left blank

zaterdag 18 december 2004 11:42

Acties:

Loona35

Topicstarter

OnTracK schreef op zaterdag 18 december 2004 @ 11:34:
Ik ben nogal CSS-noob, maar:
De margin is de afstand die een element tot het volgende element bepaald. Maar met een position: absolute; zijn er geen andere elementen meer die invloed uitoefenen op de jouwe.

kortweg: maak van die margin-right eens een padding-right
Ik denk dat dat is wat je wil bereiken

/edit
Damn, moet ff knutselen nog want nu botst ie alsnog. Alleen nu over-ruled die padding.

code:

<style type="text/css">
td {padding-right: 55px}

p
{
position: absolute;
top: 75px;
left: 55px
}
</style>

text haal ik aan met

code:

1
2
3

<td><tr><p>
text
</td></tr></p>

crisp schreef op zaterdag 18 december 2004 @ 11:37:
Overigens kan en mag je een paragraaf niet in een font-tag nesten. Font-tags zijn ook deprecated en dien je dus ook niet meer te gebruiken.

got that, thnx

[ Voor 18% gewijzigd door Loona35 op 18-12-2004 11:46 ]

zaterdag 18 december 2004 11:44

Acties:

JayVee

shibby++!

gebruik eens

code:

1	p.margin { color: red; }

om te testen of het echt niet werkt. Margin zou gewoon moeten werken uiteraard maar je weet maar nooit.

In welke browser heb je getest?

ASCII stupid question, get a stupid ANSI!

zaterdag 18 december 2004 11:48

Acties:

Loona35

Topicstarter

JayVee schreef op zaterdag 18 december 2004 @ 11:44:
gebruik eens
code:
1
p.margin { color: red; }
om te testen of het echt niet werkt. Margin zou gewoon moeten werken uiteraard maar je weet maar nooit.

In welke browser heb je getest?

Die werkt wel, dan zou de fout dus zitten in mijn code?

Maar stand-alone werkt die code wel perfect

/edit
getest in me normale windows explorer

[ Voor 6% gewijzigd door Loona35 op 18-12-2004 11:50 ]

zaterdag 18 december 2004 11:53

Acties:

OnTracK

loona35 schreef op zaterdag 18 december 2004 @ 11:42: (ingekort)
[...]

text haal ik aan met
code:
1
2
3
<td><tr><p>
text
</td></tr></p>
[...]

Mwaaargh!, leer eens tags openen en sluiten

tr is een regel, komt als eerste, sluit je als laatste
in die regel staan td's - cellen - die open je dus later, maar omdat er ook meerdere in een regel kunnen staan sluit je ze eerder
in een cel staat bij jou dan weer een p - paragraaf - die open je als laatste en sluit je als eerste.

Misschien lost dit je probleem niet op, en misschien heb je dit per ongeluk nu fout getypt. Maar let erop.

Stel dat je een zak hebt - tr/regel - daarín stop je een tweede papieren zak - td/cel - nu sluit je eerst de buitenste af om daarna te proberen de binnenste naar buiten te halen en die weer af te sluiten terwijl er óók nog een open paragraaf in zit die weer dicht gemaakt moet worden.
mmm, beetje vaag voorbeeld, maargoed.

Bovendien zit je met je CSS een paragraaf die in een afgesloten zak zit te verplaatsen naar ergens anders. Wil je niet de gehel table verplaatsen? als het alleen deze cel is, waarom staat hij dan in een table, kan je daar niet beter een apart DIV'je van maken?
Gebruik je sowieso tables voor layout? is niet de bedoeling.

[ Voor 28% gewijzigd door OnTracK op 18-12-2004 11:57 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

zaterdag 18 december 2004 12:03

Acties:

Loona35

Topicstarter

Eindelijk gelukt

hij is nu als volgt

code:

<html>

<head>
<title>New Page 6</title>
<style type="text/css">
p.padding {padding-right: 155px}

p
{
position: absolute;
top: 75px;
left: 55px
}
</style>
</head>

<body>

<p class="padding">SMD, dat staat voor Support, Management &amp; Development, is een
servicegerichte Nederlandse onderneming die totale productieproductieprocessen van u
overneemt. Sinds 1994 is SMD succesvol op de Nederlandse, Franse, Duitse en Italiaanse
markten actief. In 1999 hebben wij de stap naar het Oostblok gezet. Dat heeft geleid tot
een eigen productie bedrijf in Roemenie. Op dit moment beschikt de Roemeense
dochteronderneming over moderne productie faciliteiten zoals CNC en conventioneel draaien
en frezen, TIG, Mig, Mag lassen kortom een modern en uitgebreid machinepark. Opdracht
acceptatie vindt in Nederland plaats. Prijs en kwaliteit garantie kunnen er voor lang
termijn verstrekt worden. De Nederlandse wetgeving is van toepassing op alle onze
leveringen. Door middel van deze formule hanteren wij ook in Nederland het lage-loon
tarieven, iets wat wij all in formule noemen </p>
</body>
</html>

[ Voor 7% gewijzigd door Loona35 op 18-12-2004 12:03 ]

zaterdag 18 december 2004 15:55

Acties:

Verwijderd

Dan zal ik even uitleggen wat er aan de hand was/is

als je een block element niet absoluut positioneert neemt ie altijd de beschikbare breedte in, als je daar dus een marge opzet wordt dat wat minder. (dat was wat je probeerde te bereiken)

als je 'm wel absoluut positioneert neemt het block de breedte aan die ie zelf nodig heeft. In geval van weinig tekst is dat dus de textbreedte, in geval van veel text is dat de beschikbare breedte (de rest wrapped)

Dit is natuurlijk niet zo als je expliciet een width aangeeft.

Overigens is al eerder gezegd dat als je een element absoluut positioneert, de rest van de elementen er geen rekening meer mee houdt. Ik vraag me dus ook af of je de boel echt wel absoluut wilt positioneren, want als je hier wat achteraan zet komt dat er overheen.

Wat je dus waarschijnlijk wilt is die p gewoon laten staan en een margin-top van 75px meegeven, een margin-left van 55px en een margin-right van 155px (of padding, afhankelijk van wat je wilt bereiken)

Als laatste is cm een prima toegestane eenheid, maar op je scherm is het een beetje loos, voor een print stylesheet is het wel handig