/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Runde hjørner på tabel
Fra : Hamzel


Dato : 02-02-07 22:54

Jeg har leget lidt med mulighederne som er på
http://webdesign101.dk/css/roundcorners/eksempel_1.html

Men det er så til bokse, og jeg tænkte på om man kan lave noget
lignende på en tabel?

Jeg vil bruge det på min hjemmeside www.lagoni.info

Med venlig hilsen
Lagoni

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Erik Ginnerskov (03-02-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 03-02-07 23:38

Hamzel wrote:

> Men det er så til bokse, og jeg tænkte på om man kan lave noget
> lignende på en tabel?

Jeg har ikke undersøgt, om det kan laves på en tabel, men prøv selv:

www.curvycorners.net

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Thomas Møller Nexø (04-02-2007)
Kommentar
Fra : Thomas Møller Nexø


Dato : 04-02-07 18:22

Hamzel wrote in dk.edb.internet.webdesign.html:
> Jeg har leget lidt med mulighederne som er på
> http://webdesign101.dk/css/roundcorners/eksempel_1.html
>
> Men det er så til bokse, og jeg tænkte på om man kan lave noget
> lignende på en tabel?

Du kan sagtens lave det samme på en tabel. Endda langt mere
enkelt vil jeg mene.
Jeg har benyttet mig af selvsamme teknik ved glere lejligheder,
men er nu faldet mere og mere for css.

Du laver et billede, der har det udseende som du gerne vil have
selve tabellen til at se ud. I Photoshop, eller hvor du ellers
laver grafik til din hjemmeside.

Når du har lavet grafikken - altså billedet i sin helhed, skal du
beskære billedet, eller dele det op i mindre bidder om man vil.

Du skal i alt bruge 8 billeder (ud fra det oprindelige).

1. Et øverste højre hjørne.
2. Et øverste mellemliggende element.
3. Et øverste venstre hjørne.
4. Et element til venstre side af tabellen.
5. Et element til højre side af tabellen.
6. Et nederste venstre hjørne.
7. Et nederste mellemliggende element (bunden i midten).
8. Et nederste højre hjørne.

Du laver så en tabelstruktur, hvor du ud over den centrale celle,
hvor indholdet skal være, er 8 andre tabel-celler.

3 i toppen, hvor du placerer henholdsvis øverste højre hjørne,
øverste element til midten og øverste venstre hjørne i de tre
første celler.

3 på midten, hvor du placerer de to side-elementer i de yderste
celler.

3 celler i bunden, hvor du placerer de grafiske elementer til
bunden.

BEMÆRK: Du bør indsætte de grafiske elementer som baggrounds i
dine tabel-celler, så tabellen understøtter varierende mængde
indhold. Altså, du bør ikke lave dine side-elementer større end
højst nødvendigt, da de alligevel bare skal ligge som en
baggrund, der gentages ned efter alt efter mængden af tekst i
tabellens midterste celle.

Endvidere bør elmenterne til hjørnerne i både toppen og bunden
være af en hvis højde, så der kompenseres for skiftende
tekststørrelse.

Ved ikke om jeg har forklaret det godt nok. Det ville måske være
nemmere med en tegning, men håber du fik en ide om hvordan det
kan laves alligevel.

Med venlig hilsen,

Thomas Møller Nexø
---------------------------------------------
Discount Domæner
http://www.discountdomains.dk
Registrering af danske og udenlandske domæner

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

tidemann (04-02-2007)
Kommentar
Fra : tidemann


Dato : 04-02-07 21:09

Thomas Møller Nexø wrote:
Det ville måske være
> nemmere med en tegning, men håber du fik en ide om hvordan det
> kan laves alligevel.



Her på:
http://www.csb-island.dk/main.php?vis=csbprae&fraindex=ja
er kalenderen lavet med en tabel

--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.formdinfremtid.dk - www.royalmontana.dk


Erik Ginnerskov (05-02-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 05-02-07 00:32

tidemann wrote:
> Her på:
> http://www.csb-island.dk/main.php?vis=csbprae&fraindex=ja
> er kalenderen lavet med en tabel

Metoden kræver en hulens masse kode for at lægge venstre og højre ramme ind
i hver enkelt tabelrække. Prøv selv at kigge efter. ;-(

Skal der anvendes grafik til det, kan det gøres smartere med anvendelse af
langt mindre kode:

http://hjemmesideskolen.dk/layout/design7/index.php

Ellers vil Jørgens metode, der slet ikke kræver andet end lidt css, være det
smarteste.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Hamzel (05-02-2007)
Kommentar
Fra : Hamzel


Dato : 05-02-07 10:35

Hej
Tak for alle svarene :0)
Som i kan se på min hjemmeside, www.lagoni.info , var jeg så ivrig efter at få
runde hjørner, at jeg gjorde et forsøg hvor jeg droppede tabellen. Hjørnerne er
fine nok efter min smag (man kan godt se pixlerne hvis man ser efter, men hvor
mange gør det...) men da jeg droppede tabellen fik jeg det gamle problem med at
styre elementerne tilbage. Dvs. at det lige nu ser rigtig pænt ud i FF men
fløjter rundt på siden i IE.

Suk... Jeg bruger Linux (Mandriva07) og derfor selvfølgelig FF, men siden
skulle jo helst se pæn ud i IE også.

Så nu er spørgsmålet om jeg skal gå tilbage til at lave en tabel, og forsøge
med nogen af de forslag til runde hjørner som i er kommet med, eller om jeg
skal forsøge at få styre elementerne med det jeg har.

Jeg vedlægger koden så i kan se hvad jeg har lavet.
Med venlig hilsen
Kenneth Lagoni


CSS:
#container {background:transparent;}
..b1, .b2, .b3, .b4 {display:block; overflow:hidden;height:1px;}
..b1 {background:#000000;margin: 0 5px;}
..b2, .b3, .b4 {background:#ffffff; border-style:solid;
border-color:#black}
..b2 {margin:0 3px; border-width:0 2px;}
..b3 {margin:0 2px; border-width:0 1px;}
..b4 {margin:0 1px;border-width:0 1px;}

..boxcontent {display:block; background:#FFFFFF;
border-width:0 1px; border-style: solid;border-color: #black;}

body {border:0}

iframe {background-color: white;}

p {font: 75%, sans-serif;}

h1 {font: bold 200%, sans-serif;}

h2 {font: bold 110%, sans-serif;}

h3 {font: bold 110%, sans-serif; background-color: #CCCCCC; padding-left:
10px;}

a {text-decoration: none;}

a {font-family: sans-serif; color: blue;}

------------

Default.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<title>Kenneth Lagoni - Index</title>
<link rel="stylesheet" type="text/css" href="css/css1.css">
<body bgcolor="#336633">
</head>
<body>
<center>
<div id="container" style="width: 800px">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b4"></b>
<div class="boxcontent">
<!-- <frame style="position:absolute; width:800px"> -->
<!-- - - - - TOP - - - - - - - - - -->
<h2 style="position:absolute; top: 17px; margin-top: 10px; margin-left:
10px;">Kenneth Lagoni</h2>

<!-- - - - MENU - - - - - - - - - -->
<hr style="position:absolute; top: 70px; width:798px;
horisontal-align:middle;"> </hr>
<width="800px">
<a style="font-size: 75%; position:absolute; top: 85px; margin-left: 60px;"
href="main.html" target="main">Front</a>
<a style="font-size: 75%; position:absolute; top: 85px; margin-left: 260px;"
href="blok/blokoversigt.html" target="main">blok</a>
<a style="font-size: 75%; position:absolute; top: 85px; margin-left: 460px;"
href="dyt/dyt_oversigt.html" target="main">dyt</a>
<a style="font-size: 75%; position:absolute; top: 85px; margin-left: 660px;"
href="kontakt.html" target="main">mail</a>
<hr style="position:absolute; top: 96px; width:798px;
horisontal-align:middle;"> </hr>
<!-- </frame> -->
<!-- - - - Main - - - - - - - - - -->
<iframe name="main" src="main.html" style="border: none; width: 790px; height:
500px; margin-top: 96px"></iframe>
</div>

<b class="b4"></b>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</div>
</body>
</html>

--------------------

Main.html
<html>
<head>
<title>Kenneth Lagoni - Main</title>
<link rel="stylesheet" type="text/css" href="css/css1.css">
</head>
<body>
<!-- Tophistorie -->
<p style="position:absolute; top: 25px; left: 10px; width: 350px;">
<u>Kalender</u>
<br><br>Fra den 15 februar skulle ISS dukke op på nattehimlen.
<br><br>Natten mellem 3 og 4 marts får vi en total måneformørkelse.
<br><br>Omkring d.22/4 kommer stjerneskudssværmen Lyriderne med ca. 15 skud i
timen.
</p>

<!-- Loppemarked - - - - - - - --->
<p style="clear:both; position:absolute; top: 35px; left: 430px; width:
120px;">
<A href="salg/salg.html" target="main">Loppemarked:</a>
<br>- LP-samling
<br>- B&O
<br>- Kaminovn<br>
<br><br>
<u>Købes:</u><br>Lille vaskemaskine
<br>BxD: 45x40
<p/>

<!-- Brød - - - - - - - - - - - - --->
<p Style="clear:both; position:absolute; top: 130px; margin-top: 10px; right:
50px; width: 120px;">Prøv min opskrift på <a href="opskrifter/broed.html"
target="main">nøddebrød</a>
og smag det med<a href="opskrifter/musling.html" target="main"> karry-ristede
muslinger.</a></p>
<img Style="position:absolute; top: 20px; right: 55px;"
src="grafik/broed/Broed2.jpg" alt="Brd">

<!-- Teleskop - - - - - - - --->
<p style="clear:both; position:absolute; top: 260px; margin-top: 20px; left:
335px; width: 380px;">
Jeg er aktiv (uden at overdrive) amatørastronom, og det er lykkedes mig at lave
nogen få <a href="astro/astro1.html" target="main">rimelige fotos.</a>
<br><br>
I et (kort) anfald af virketrang, lavede jeg en <a
href="astro/artikel_okular/artikel_okular.html" target="main"> artikel om
okularer</a>, og jeg pønser på en artikel om hvordan man laver en
polaropstilling.<p/>
<a href="astro/astro1.html" target="main">
<img Style="position:absolute; top: 270px; left: 10px; margin-right: 10px;"
src="grafik/astrografik/ego.jpg" alt="Astro" border="0">
</a>

<!-- Streger - - - - - - - --->
<hr style="position:absolute; top: 4px; left: 390px; height: 233px;">
<hr style="position:absolute; top: 4px; right: 200px; height: 233px;">
<hr style="position:absolute; top: 235px; right: 0px; left: 0px; width:780px;">
<hr style="position:absolute; top: 460px; right: 0px; left: 0px; width:780px;">
</body>
</html>




--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Dennis Munding (05-02-2007)
Kommentar
Fra : Dennis Munding


Dato : 05-02-07 10:15

Hej!
"Erik Ginnerskov" <erik@donotspammeplease.invalid> skrev i en meddelelse
news:45c66ce4$0$49201$14726298@news.sunsite.dk...
> Ellers vil Jørgens metode, der slet ikke kræver andet end lidt css, være
> det smarteste.

Og udover at man ikke behøver at lave en masse grafik, er Jørgens metode
også langt mere fleksibel:

http://munding-webdesign.dk/Produkter/Model_4(runde_hjoerner)/ - (skal IKKE
betragtes som reklame! - blot illustration!) - prøv at holde CTRL nede og
rul med musehjulet (virker ikke korrekt i IE7!) - det kalder jeg fleksibelt
design!


Med venlig hilsen
--
Dennis Munding
http://tolkecentret.dk/ - Tolkning, oversættelse, rådgivning og kurser!
http://pe-vagtservice.dk/ -Et sikkert valg til at passe på dine værdier!
http://munding-webdesign.dk/ -Vi ses! - ganske enkelt...



Allan Vebel (05-02-2007)
Kommentar
Fra : Allan Vebel


Dato : 05-02-07 18:17

Dennis Munding skrev:

> - blot illustration!) -

Der er sket noget med din .top_slogan, den kryber ind
under overskriften.

Mit gæt er at jeg ikke har skrifttypen Vivaldi installeret,
og at Times er lidt bredere.

--
Allan Vebel
http://html-faq.dk



Dennis Munding (05-02-2007)
Kommentar
Fra : Dennis Munding


Dato : 05-02-07 22:17

Hej Allan!
"Allan Vebel" <spam@do.not> skrev i en meddelelse
news:45c7666d$0$49206$14726298@news.sunsite.dk...
> Dennis Munding skrev:
>
>> - blot illustration!) -
>
> Der er sket noget med din .top_slogan, den kryber ind
> under overskriften.
>
> Mit gæt er at jeg ikke har skrifttypen Vivaldi installeret,
> og at Times er lidt bredere.

??
Jeg bruger da ikke Vivaldi på den side, som jeg linkede til...??

Går så ud fra (fordi jeg betragter mig selv som logikker!? ), at du mener
på hovedsiden...
Det skulle være fikset nu...

Tak for tippet - havde lige glemt at teste hvordan det så ud med TNR
alene...


Med venlig hilsen
--
Dennis Munding
http://tolkecentret.dk/ - Tolkning, oversættelse, rådgivning og kurser!
http://pe-vagtservice.dk/ -Et sikkert valg til at passe på dine værdier!
http://munding-webdesign.dk/ -Vi ses! - ganske enkelt...



Allan Vebel (06-02-2007)
Kommentar
Fra : Allan Vebel


Dato : 06-02-07 00:59

Dennis Munding skrev:

> Jeg bruger da ikke Vivaldi på den side, som jeg
> linkede til...??

Nej!

> at du mener på hovedsiden...

Ja!

> Det skulle være fikset nu...

Jeg kan se at du har flyttet rundt på teksten, men nu ser
det ikke ensartet ud i forskellige browsere - i Firefox
står teksten lige oven på linjen, hvor den i IE flugter med
logoteksten.

I den forbindelse vil jeg også påpege uheldigheden af
at anvende en skrifttype der ikke er bredt understøttet -
jeg kender den slet ikke.

--
Allan Vebel
http://html-faq.dk



Jørn Andersen (06-02-2007)
Kommentar
Fra : Jørn Andersen


Dato : 06-02-07 01:12

On Tue, 6 Feb 2007 00:59:14 +0100, "Allan Vebel" <spam@do.not> wrote:

>I den forbindelse vil jeg også påpege uheldigheden af
>at anvende en skrifttype der ikke er bredt understøttet -
>jeg kender den slet ikke.

Det understreger ihvertfald vigtigheden af at angive kendte/bredt
understøttede skrifttyper som alternativ.
(Og så teste hvordan det ser ud med dem, hvis det er en sjælden font.)


Mvh. Jørn

--
Jørn Andersen,
Brønshøj

Dennis Munding (06-02-2007)
Kommentar
Fra : Dennis Munding


Dato : 06-02-07 13:57

Hej Allan!
"Allan Vebel" <spam@do.not> skrev i en meddelelse
news:45c7c4d9$0$49201$14726298@news.sunsite.dk...
> Jeg kan se at du har flyttet rundt på teksten, men nu ser
> det ikke ensartet ud i forskellige browsere - i Firefox
> står teksten lige oven på linjen, hvor den i IE flugter med
> logoteksten.

Det skulle så være rettet - det gik lidt for stærkt - igen! :-/
Jeg prøvede med lidt relativ placering, men det gik ikke, da navnet er
placeret absolut (nødvendigt hvis man vil have skygge-effekten med), så jeg
rykkede blot sloganet lidt længere til højre, men glemte at rette
"position:relative" tilbage til "position:absolute"...

> I den forbindelse vil jeg også påpege uheldigheden af
> at anvende en skrifttype der ikke er bredt understøttet -
> jeg kender den slet ikke.

Jeg ved det, og jeg er meget træt af, at der ikke findes en mere udbredt pæn
kursiv skrift.
Alternativet er at lave det som en grafik, men det har jeg af principelle
årsager valgt *ikke* at gøre. Jeg foretrækker css-løsningen, og må så
indsætte en alternativ skrifttype, som også kan læses af ældre OS'er, så som
Win98... (har prøvet med en script-type, og det så bestemt ikke kønt ud,
derfor er Times New Roman sat ind som alternativ...).

Mange tak for inputtet!


Med venlig hilsen
--
Dennis Munding
http://tolkecentret.dk/ - Tolkning, oversættelse, rådgivning og kurser!
http://pe-vagtservice.dk/ -Et sikkert valg til at passe på dine værdier!
http://munding-webdesign.dk/ -Vi ses! - ganske enkelt...



Erik Ginnerskov (06-02-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 06-02-07 00:50

Dennis Munding wrote:

> http://munding-webdesign.dk/Produkter/Model_4(runde_hjoerner)/ -
> (skal IKKE betragtes som reklame! - blot illustration!) - prøv at
> holde CTRL nede og rul med musehjulet (virker ikke korrekt i IE7!) -
> det kalder jeg fleksibelt design!

Jeg ved ikke, om det er din eller minIE7, der ikke virker korrekt, men i min
IE7 skalerer det fint.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Dennis Munding (06-02-2007)
Kommentar
Fra : Dennis Munding


Dato : 06-02-07 14:11

Hej Erik!
"Erik Ginnerskov" <erik@donotspammeplease.invalid> skrev i en meddelelse
news:45c7c297$0$49198$14726298@news.sunsite.dk...
> Dennis Munding wrote:
>
>> http://munding-webdesign.dk/Produkter/Model_4(runde_hjoerner)/ -
>> (skal IKKE betragtes som reklame! - blot illustration!) - prøv at
>> holde CTRL nede og rul med musehjulet (virker ikke korrekt i IE7!) -
>> det kalder jeg fleksibelt design!
>
> Jeg ved ikke, om det er din eller minIE7, der ikke virker korrekt, men i
> min IE7 skalerer det fint.

Ja, hvad kan jeg sige....?? KLIK-DUT-DUUT.... (Forbindelse røg til min
hjerne - vi beklager afbrydelsen....)

Nej, spøg til side!

Jeg ved ikke, hvad jeg har tænkt på/set efter, da jeg testede det i IE7 -
kan godt se nu, at det virker glimrende...
Der må have været sort skærm den dag, jeg tjekkede det...


Med venlig hilsen
--
Dennis Munding
http://tolkecentret.dk/ - Tolkning, oversættelse, rådgivning og kurser!
http://pe-vagtservice.dk/ -Et sikkert valg til at passe på dine værdier!
http://munding-webdesign.dk/ -Vi ses! - ganske enkelt...



Erik Ginnerskov (06-02-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 06-02-07 14:20

Dennis Munding wrote:

> KLIK-DUT-DUUT.... (Forbindelse røg til min
> hjerne - vi beklager afbrydelsen....)

Det kender jeg skam godt.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste