Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

tekstvak met ronde hoeken maken

Jan2000
16 antwoorden
  • iemand heeft voor mijn site in dreamweaver 8 een tekstvak gemaakt met vierkante hoeken.
    in css staat er :
    #tekstvak {
    background-color: #F9F9FB;
    position: relative;
    overflow: auto;
    padding: 10px;
    border: 2px solid #9DB9CF;
    height: 40%;

    }

    Wil nu graag dit tekstvak voorzien van mooie ronde hoeken. Dit schijnt te kunnen met css. Wie geeft mij de code waarmee ik bovenstaande code kan vervangen. Ben zelf nog een leek.
    Bedankt,
    Jan
  • [quote:e587d44d9a="Jan2000"]Wie geeft mij de code[/quote:e587d44d9a]Klinkt erg als een scriptrequest… Heb je zelf bijvoorbeeld al gezocht op de door jou zelf genoemde trefwoorden 'css ronde hoeken', of naar het Engelse equivalent?
  • Heb al gezocht op css en ronde hoeken maar weet zelf niet zo raad met hetgeen ik gevonden heb. Daarom hier de vraag..niet uit luiheid maar uit onwetendheid
  • Heb dit dus reeds gevonden: http://www.csssnippets.be/tags.php/geen%20hack

    Maar wil dit eerst even uitproberen in dreamweaver. De html weet ik wel te plaatsen maar weet niet waar ik de css stijl moet plaatsen. Hoe gaat dat? Moet ik eerst een css stijl/ file aanmaken en daar naar verwijzen in de html code? Wie geeft me enige aanwijzingen?
  • Je kan niet zomaar met CSS ronde hoeken maken (zover als ik weet), wat je zou moeten doen is een achtergrond plaatje gebruiken met ronde hoeken. Maar zo makkelijk is niet helemaal, als je wilt dat het tekst vak van maat kan verranderen heb je niets aan een achtergrond plaatje met een bepaalde maat, en aangezien je in CSS 1 en CSS 2 maar 1 achtergrond plaatje per element kan toekennen moet je verschillende elementen nesten, elk met een ander achtergrond plaatje. Je hebt dan een plaatje nodig voor elke hoek en voor de randen.
    Je kan meerdere elementen in 1 plaatje stoppen en de positie van het plaatje veranderen zodat je maar 1 deel ervan ziet…dit is niet echt makkelijk maar wel te doen. Het wordt een stuk makkelijker als het teksvak alleen in de hoogte hoeft te kunnen verranderen. Dan heb je 3 geneste elementen nodig.
    bv:[code:1:afabb3c888]<div class=teksvak><div class=2><div class=3>
    tekst
    </div></div></div>[/code:1:afabb3c888]
    En dan ken je elke div een ander achtergrond plaatje toe, de eerste een plaatje van de randen, hoeft maar een paar pixels hoog, die je dan in de CSS, background-repeat: repeat-y; meegeeft. En dan in de tweede en derde het plaatje van de boven en de onderkant (background-position: top center (of bottom center)).

    Hier een link naar een andere methode die ook werkt, maar alleen als heel het tekstvlak 1 kleur krijgt Link1, Link2, Link3

    En deze oplossing vind ik eigenlijk de mooiste; Link

    veel geluk ermee
  • Wil een tekstvak maken zoiets als: http://www.sport-support-twente.nl/pages/sportnieuws.html , zonder het gedeelte met de links aan de linkerzijde..daar komt ook gewoon tekst. Gebruik ook 1 achtergrondkleur.

    Ben een beginneling en val van het een in het ander
  • Tja, dat is niet echt een mooi voorbeeld, veel stijl in de markup en er worden ook nog eens frames gebruikt. Dat is niet echt van deze tijd…

    In de pagina die je als link geeft is de achtergrond statisch, de achtergrond hoeft niet van vorm te verranderen. Dit betekend dat om een ronde border te krijgen je alleen even in paint shop, of iets degelijks, een rechthoek moet maken van de juiste kleur met ronde hoeken. Daar is een functie voor. "Rounded Rectangle" heet het in Paint Shop Pro X.
    Wil je wel dat de achtegrond van grootte kan verranderen dan heb ik hier een heel eenvoudig voorbeeld gemaakt. Ik heb de style (CSS) in de markup (HTML) gezet zodat je niet twee bestanden tegelijk hoeft te bekijken. Normaal gesproken zet je de style in een appart bestand waarnaar je linked in het <head></head> element.
    Hoop dat je er wat mee kan. Het snelste leer je door het zelf te doen en de code te bekijken van anderen.

    PS; ik kan ook het gebruik van firefox in combinatie met de "Web developer toolbar" add-on adviseren.
  • Bedankt voor je reacties Drewster. De link naar het tekstblok wat jij zo mooi vindt, is idd erg mooi. Alleen gebruik ik een lichtblauw venster met donkerblauwe letters. Heb inmiddels een proef html pagina gemaakt een een style.css in dreamweaver. Wil een en ander eens uitproberen. Maar het schiet nog niet op. Misschien dat iemand mij telefonisch wat uitleg wil geven. Stuur maar even een privebericht als je wilt!
    bedankt,
    Jan
  • http://www.smileycat.com/miaow/archives/000044.html
  • [quote:81aa3667e0="Jan2000"]Bedankt voor je reacties Drewster. De link naar het tekstblok wat jij zo mooi vindt, is idd erg mooi. Alleen gebruik ik een lichtblauw venster met donkerblauwe letters. Heb inmiddels een proef html pagina gemaakt een een style.css in dreamweaver. Wil een en ander eens uitproberen. Maar het schiet nog niet op. Misschien dat iemand mij telefonisch wat uitleg wil geven. Stuur maar even een privebericht als je wilt!
    bedankt,
    Jan[/quote:81aa3667e0]
    Het ging er mij niet om dat het tekst vak zelf mooi is maar eerder om de methode die ik wel kan waarderen…

    Ik krijg de indruk dat het nog een beetje schort aan basis kennis wat betreft html en vooral CSS. Een jaar geleden was ik waarschijnlijk ongeveer waar jij nu bent wat betreft html en CSS kennis. In het verloop van het maken van twee websitejes ben ik wat meer bekend geraakt met html/xhtml en CSS, wat toch de basis zou moeten zijn van elke website. En ik ben nog lang niet uitgeleerd…

    Op de site van W3schools kan je tutorials vinden die je basis leren van xhtml en css, iets wat je nodig zal hebben als iemand je iets wil uitleggen of als je uitleg op internet wil begrijpen. Een goede beheersing van de engelse taal is natuurlijk wel vereist. Ik kom er nog geregelt om iets na te lezen..

    De HTML handleiding website is ook een goede nederlandstalige site om te gebruiken als naslagwerk.

    Ik hoop dat je er iets mee kan.

    PS: ik zou je willen adviseren om een eenvoudige editor te gebruiken zoals Notepad++ (download) ipv dreamweaver, dit zorgd in mijn ervaring voor een stijlere leercurve. Je kan altijd later weer terug vallen op Dreamweaver voor de uitgebreide functionaliteit…
  • Bedankt voor je uitvoerige reacties. Het schort mij idd nogal aan basiskennis. Zal op de genoemde links eerst eens een en ander doorlezen.
    Heb nu ook iemand hier in Hengelo gevonden die mij wil helpen. Nogmaals bedankt,
    vr. gr.
    Jan
  • Ik gebruik zelf meestal nifty corners:

    http://www.html.it/articoli/nifty/index.html

    Voorbeeldje: http://www.html.it/articoli/nifty/nifty8js.html

    Werkt over het algemeen wel aardig.
  • heb de volgende link gevonden:
    http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm

    Wil het tekstvak gebruiken met de dubbele lijnen ( extended css) Nu heb ik een en ander uitgeprobeerd maar nu blijkt dat in het tekstvak de achtergrondkleur het tekstvak niet helemaal vult. Er blijft een dunne witte rand rondom zichtbaar. Waar kan dat aan liggen.
    Heb de code hier toegevoegd. Vind dit tekstvak mooi vanwege de dubbele lijnen. Op de aangegeven site is deze ook zichtbaar. Onder in [i:8d2fe6094d]a hurry[/i:8d2fe6094d] kun je een en ander downloaden.
    Groeten,
    Jan

    <!–
    /*
    | liquidcorners-extended.css; feel free to adapt the style!
    | ================================================
    | use: 4 corners with painted border outside a contentbox with class="inside";
    | image1 = upper half: top left corner, long top border, top right corner
    | under half: bottom left corner, long bottom border, bottom right corner
    | image2 = left half: left border; right side: right border
    | because repeat-y: image2 can be reduced in height!
    | CHANGE = you have to change this for fitting to your image
    | YCC = You Can Change (or omit), if wanted
    | DNC = Do Not Change
    | credits: original by francky kleyneman, see article/tutorial in Francky's Developers Corner:
    | http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
    | adapted
    | by…..: … (your name and site?!)
    |
    | + please let this text & links intact for a next user +
    */

    .top-left, .top-right, .bottom-left, .bottom-right {
    background-image: url('images/yourimage1.gif'); /* CHANGE: path and name of your image1 */
    height: 9px; /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
    font-size: 2px; /* DNC: correction IE for height of the <div>'s */
    }
    .top-left, .bottom-left {
    margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
    }
    .top-right, .bottom-right {
    margin-left: 9px; /* CHANGE: replace by the width of one of your corners */
    margin-top: -9px; /* CHANGE: replace by the height of one of your corners */
    }
    .top-right {
    background-position: 100% 0; /* DNC: position right corner at right side, no vertical changes */
    }
    .bottom-left {
    background-position: 0 -9px; /* CHANGE: replace second number by negative height of one of your corners */
    }
    .bottom-right {
    background-position: 100% -9px; /* CHANGE: replace second number by negative height of one of your corners */
    }
    .inside {
    margin-left: 9px; /* CHANGE: replace by the width of one of your corners */
    margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
    background: #FFFAE8; /* YCC: background-color of the inside */
    color: #800000; /* YCC: default text-color of the inside */
    padding-left: 10px; /* YCC: all texts at some distance of the left border */
    padding-right:10px; /* YCC: all texts at some distance of the right border */
    text-align: left; /* YCC: position of all texts inside */
    }
    .notopgap { margin-top: 0; } /* DNC: to avoid splitting of the box */
    .nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */
    .insideleft, .insideright {
    background-image: url('images/yourimage2.gif'); /* CHANGE: path and name of your image2 */
    background-repeat: repeat-y; /* DNC: to pile the image2 as much as needed */
    }
    .insideright { background-position: 100% 0; } /* DNC: position right corner */

    /*
    implementation in the page:

    <head>
    <link rel="stylesheet" type="text/css" href="liquidcorners-extended.css">

    </head>
    <body>


    <div class="top-left"></div><div class="top-right"></div>
    <div class="insideleft"><div class="insideright"><div class="inside">
    <p class="notopgap">Your text & other things inside</p>

    <p class="nobottomgap">…</p>
    </div></div></div>
    <div class="bottom-left"></div><div class="bottom-right"></div>


    </body>
    */
  • Foutmeldingen in firefox gebruiken ook ronde hoeken. Dit is de gebruikte css code:

    #errorPageContainer {
    position: relative;
    max-width: 52em;
    margin: 1em auto;
    border: 1px solid ThreeDShadow;
    [b:320ff4efaf]-moz-border-radius: 10px;[/b:320ff4efaf]
    padding: 1em;
    -moz-padding-start: 2px;
    -moz-padding-end: 2px;
    background: url("chrome://global/skin/icons/Warning.png";) left 0 no-repeat -moz-Field;
    -moz-background-origin: content;
    }

    Maar ik ben bang dat dit alleen werkt in firefox.
  • Zowel in Fx als in IE7 ziet het teksvak er hier goed uit (link), dus weet niet precies wat je bedoeld…

    Let wel op dat je niet een andere achtergrond kleur kan kiezen dan aangegeven in het bestand omdat de plaatjes die achtergrond kleur hebben mee gekregen. Als je andere kleuren wil gebruiken moet je zelf in een grafisch programma ff plaatjes maken, wat niet moeilijk is, met de kleuren die jij wilt gebruiken.

    Deze methode lijkt een beetje op die in deze link (nu ff onberijkbaar… :( ) die ik je een paar post terug hebt gegeven , alleen vindt je daar veel minder uitleg…

    [i:073c5731d5]PS; je kan ook de breedte van het tekstvlak controleren door er een "container" div omheen te doen zoals ik hier heb gedaan ( .smal-container{width:300px;} in de stylesheet toegevoegd), dan kan je ook makkelijker de positie van het tekstvlak controleren door de positie van de "container" div te verranderen. [/i:073c5731d5]
  • Ben er ook achtergekomen dat het aan de plaatjes ligt. In beide plaatjes moet ik de witte achtergrond aanpassen. Ben nu druk met hangen en wurmen bezig om geheel nieuwe plaatjes te maken in fireworks. Lukt een beetje. Bedankt voor je reactie.
    Jan

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.