Ga naar inhoud

afgeronden hoeken rond tekst????

Robinho

Door Robinho
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

Robinho Meewerkend lid

Robinho

Geplaatst:
Geplaatst:

Hallo iedereen,

voor iedereen die mij kan helpen

ik heb een script gemaakt (zie hier onderen)

het is een soort tabel ik weet niet hoe ik het moet zeggen maar het heeft af geronden hoeken maar die soort tabel dan is over de hele breedte van de pagina maar ik wil juist dat hij alleen rond een tekst komt te staan( dus in mijn script is dat rond "HOI") Ik weet niet wat ik moet veranderen in mijn script?

Wie kan mij helpen????

			
<html>
		<head>
	<style>

.top-left {

margin-right: 9px; 
background-image: url('corners1280x18.GIF');
height: 9px;  
font-size: 100px; 
}

.top-right {

margin-top: -9px; 
margin-left: 9px; 
background-image: url('corners1280x18.GIF'); 
background-position: 100% 0; 
height: 9px; 
font-size: 100px;
}

.bottom-left {

margin-right: 9px; 

background-image: url('corners1280x18.GIF');
background-position: 0 -9px; 
height: 9px;
font-size: 100px;
}

.bottom-right {

margin-top: -9px; 
margin-left: 9px; 
background-image: url('corners1280x18.GIF'); 
background-position: 100% -9px; 
height: 9px; 
font-size: 100px; 
}

.inside {

border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
color: black;
padding-left: 10px;
padding-right: 10px;
}

.notopgap {

margin-top: 0;
}

.nobottomgap {

margin-bottom: 0;
}




	</style>

		</head>


<body>







<div class="top-left"></div>
<div class="top-right"></div>

<div class="inside">

<p class="notopgap">HOI</p>
...
<p class="nobottomgap">hoi</p>

</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>


</html>

Link naar reactie
Delen op andere sites
XiroN Enthousiasteling

XiroN

Geplaatst:
Geplaatst:

de div waarin je de afbeelding (met de afgeronden hoeken) moet je rond 'HOI' plaatsen niet rond het ganse geheel, dan bekom je het resultaat dat je wenst normaal gezien ;)

probeer dat eens lukt het niet dan zal ik wel eens iets proberen :)

zou je die afgeronde afbeelding eens willen posten?

Link naar reactie
Delen op andere sites
leroy Mentor

leroy

Geplaatst:
Geplaatst:

je moet in je stylesheet eens een overlay toevoegen en dit een breedte van een aantal pixels meegeven

dus dit:

<style>
.overlay {
width:150px;
}

... (rest van je stylesheet)

</style>

Je moet dan rondom elk stukje tekst wat die rondingen moet hebben een DIV plaatsen die de class: overlay heeft

dus zo:


[color=Purple]<div class="overlay">[/color]
   <div class="top-left"></div>
   <div class="top-right"></div>

   <div class="inside">
        [color=Navy]<p class="notopgap">[/color]HOI[color=Navy]</p>[/color]
     [color=Navy]   ...
        <p class="nobottomgap">[/color]hoi[color=Navy]</p>[/color]
   </div>
   <div class="bottom-left"></div>
   <div class="bottom-right"></div>
[color=Purple]</div>[/color]

de stukjes in het paars zijn de stukjes die je toe moet voegen.

Nu gaat hij het gehele "knopje" met afgeronde hoeken een breedte geven van 150 pixels

wil je maar 1 regel tekst waar afgeronde hoeken omheen zitten:

dan moet je het blauwe gedeelte weghalen

Let dan wel op!!!... wil je een nieuw knopje moet je alleen hetgeen wat zichtbaar is (dus niet je stylesheet) herhalen

dus krijg je voor de knopjes:

- hallo

- test

dit:


<div class="overlay">
   <div class="top-left"></div>
   <div class="top-right"></div>

   <div class="inside">
        [color=Red]Hallo[/color]
   </div>
   <div class="bottom-left"></div>
   <div class="bottom-right"></div>
</div>


<div class="overlay">
    <div class="top-left"></div>
    <div class="top-right"></div>

    <div class="inside">
        [color=Red]Test[/color]
    </div>
    <div class="bottom-left"></div>
    <div class="bottom-right"></div>
</div>

zoals je ziet heb ik nu 2 maal hetzelfde herhaald. maar dan met een losse tekst erin.

Ik heb dit thuis uitgetest (zonder rondingen) en het werkte.

Mocht je er niet uitkomen... moet je het maar vragen :biggrin:

het is ook makkelijker om even je achtergrond hier te plaatsen zodat als het niet werkt wij even een oplossing kunnen zoeken. zodat het zeker werkt

Groeten, Leroy

Link naar reactie
Delen op andere sites
 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.