/ Forside/ Teknologi / Udvikling / HTML / Spørgsmål
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
CSS border
Fra : christofferd 		Vist : 586 gange
100 point
Dato : 29-05-05 22:09
Hej, hvad er koden i stylesheet for:

I en firkantet boks skal jeg have en hvid kant i højre side. Kanten (det må vel være det man kalder "border") skal være 1 pixel. Stil endelig uddybende spørgsmål hvis I ikke fatter hvad jeg snakker om...

 
 
Kommentar
Fra : molokyle

Dato : 29-05-05 22:14
Kommentar
Fra : severino

Dato : 30-05-05 20:34
Prøv dette! - Er det noget i den stil du tænker på??
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
   <TITLE>[Border typer]</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
</HEAD>

<BODY><H3>Rammetype og varianter, vist uden farve og med farve</H3>

<TABLE WIDTH="100%" BORDER="0">
<TR>
   <TD WIDTH="50%"><input type="Text" name="1" style="border-style:none;" value="text;"> none<BR></TD>
   <TD WIDTH="50%"><input type="Text" name="1" style="border-color:#ff0000;" style="border-style:none;" value="text;"> none<BR></TD>
</TR>

<TR>
   <TD><input type="Text" name="1" style="border-style:dotted;" value="text;"> dotted<BR></TD>
   <TD><input type="Text" name="1" style="border-color:#00ff00;" style="border-style:dotted;"> dotted<BR></TD>
</TR>

<TR>
   <TD><input type="Text" name="1" style="border-style:dashed;" value="Type 'dashed'"> dashed<BR></TD>
   <TD><input type="Text" name="1" style="border-color:#0000ff;" style="border-style:dashed;"> dashed<BR></TD>
</TR>

<TR>
   <TD><input type="Text" name="1" style="border-style:solid;" value="Type 'solid'"> solid<BR></TD>
   <TD><input type="Text" name="1" style="border-color:#ff0000;" style="border-style:solid;"> solid<BR></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-style:double;" value="text;"> double<BR></TD>
   <TD><input type="Text" name="1" style="border-color:#ff0000;" style="border-style:double;"> double<BR></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-style:grove;" value="text;"> grove<BR></TD>
   <TD><input type="Text" name="1" style="border-color:#ff0000;" style="border-style:grove;"> grove<BR></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-style:ridge;" value="text;"> ridge<BR></TD>
   <TD><input type="Text" name="1" style="border-color:#ff0000;" style="border-style:ridge;"> ridge<BR></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-style:inset;" value="text;"> inset<BR></TD>
   <TD><input type="Text" name="1" style="border-color:#ff0000;" style="border-style:inset;"> inset<BR></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-style:outset;" value="text;"> outset<p></TD>
   <TD><input type="Text" name="1" style="border-color:#ff0000;" style="border-style:outset;"> outset<p></TD>
</TR>
</TABLE>

<H3>Ramme facon</H3>
<TABLE WIDTH="100%" BORDER="0">
<TR>
   <TD WIDTH="50%"><input type="Text" name="1" style="border-width: thin;" value="thin"></TD>
   <TD WIDTH="50%"><input type="Text" name="1" style="border-width: thin;" style="border-color:#ff00ff;" value="thin"></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-width: medium;" value="medium"></TD>
   <TD><input type="Text" name="1" style="border-width: medium;" style="border-color:#00ff00;" value="medium"></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-width: thick;" value="thick"></TD>
   <TD><input type="Text" name="1" style="border-width: thick;" style="border-color:#ff0000;" value="thick"></TD>
</TR>
<TR>
   <TD><input type="Text" name="1" style="border-width: 10px;" value="10px"></TD>
   <TD><input type="Text" name="1" style="border-width: 10px;" style="border-color:#0000ff;" value="10px"></TD>
</TR>
</TABLE>

<H3>Baggrundsfarve</H3>
<TABLE WIDTH="100%" BORDER="0">
<TR>
   <TD WIDTH="50%"><input type="Text" name="1" style="background-color:#ff6666;" value="R&oslash;d" style="FONT: Bold Italic 12px verdana;"></TD>
   <TD WIDTH="50%"></TD>
</TR>

<TR>
   <TD><input type="Text" name="1" style="background-color:#00ff00;" value="Gr&oslash;n" style="FONT: bold 12px verdana;"></TD>
   <TD><input type="Text" name="1" style="background-color:#00ff00;" style="border-width: thick;" style="border-color:#ff00ff;" value="Orange" style="FONT: bold 12px verdana;"></TD>
</TR>

<TR>
   <TD><input type="Text" name="1" style="background-color:#0000ff;" value="Bl&aring;" style="FONT: bold 12px verdana;"></TD>
   <TD></TD>
</TR>

<TR>
   <TD><input type="Text" name="1" style="background-color:#ff9900;" value="Orange" style="FONT: bold 12px verdana;"></TD>
   <TD><input type="Text" name="1" style="background-color:#ff9900;" style="border-width: thick;" style="border-color:#ff0000;" value="Orange" style="FONT: bold 12px verdana;"></TD>
</TR>
</TABLE>


<!-- font: bold 11px verdana; style="FONT: bold 11px verdana; -->
</BODY>
</HTML>


Lav denne tekst om til en htm fil!

Kommentar
Fra : molokyle

Dato : 30-05-05 20:50
Severino -> Det er inline CSS og bør kun benyttes til overwriting af overordnede stylesheets. Typisk Webwriter snot

Man bør lave et inkluderet overodnet stylesheet for ALLE side i en *.css fil. Så kan man specificere de enkelte elementer og give dem forskellig fortolkning vha. forskellige class'es.

Kan du se, du skal rette f.eks alle links farver på alle sider ? Ind i hver enkelt Style=".." ? Ikke smart med 80 websider med 20 link på hver

Lav en <style type="text/css"> ... </style> i <head> ... </head> sektionen eller bedre : Inkludér et stylesheet med : <link rel="stylesheet" type="text/css" href="DIT_STYLESHEET.css" /> samme steds. Flere andre muligheder eksisterer : http://www.kandu.dk/dk/kurser/css/cssKursus.asp

</MOLOKYLE>

Kommentar
Fra : severino

Dato : 31-05-05 17:40
Det ved jeg godt MOLO. - Ideen med denne kildetekst er blevet til, da jeg forsøgte at samle de mange muligheder sammen, og kan derfor tjene som udklipsark, hvis der er en af disse effekter man skal bruge til en hjemmeside.
Det er det der er baggrunden for sidens opsætning!

Håber at du tilgiver mit eksperiment!

Kommentar
Fra : AndersT

Dato : 16-07-05 17:57
hey.. prøv med border-right:1px solid black; hvis du har et css stylesheet.. ellers sæt det ind i en style="".. ved ik om det er det du mener : )

Kommentar
Fra : severino

Dato : 18-07-05 18:23
Jeg tror at christofferd har opgivet håbet. Det er 1½ måned siden han stillede spørgsmålet, og har ikke givet lyd fra sig siden.

Kommentar
Fra : molokyle

Dato : 18-07-05 19:06
Nu findes 'snedige' CSS boxe også med runde hjørner, UDEN brug af grafiske elementer eller bullets :

http://webdesign101.dk/css/roundcorners/index.php

Kode
<html>
<title>Rounded corners</title>
<style type="text/css">

/* Snazzy Box */

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#63c; border:0;}
#xsnazzy p {padding-bottom:1em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {display:block;background: transparent;width:50%;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#eca; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 5px; background:#fff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent
{
display:block;
background:#eca;
border-style:solid;
border-color: #000;
border-width:0 1px;
text-align:center; /* Centering content */
}

/* Inset 3D Raised */
.raised {background: transparent; width:90%;margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}

.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}

.raised .boxcontent
{
display:block;
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #999;
text-align:left; /* Align content left */
}

/* Inset 3D Curved */
.inset {background: transparent; width:90%;margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}

.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent
{
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
text-align:left; /* Align content left */
}
</style>
</head>
<body>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p></p>
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Raised</h1>
<p>Rounded corners with raised borders</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
<div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Inset</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : severino

Dato : 29-08-05 23:38
HALLO Christoffer
Hvordan går det med dine rammer?
Det er jo snart længe siden, og vi er ustyrlig nysgerrige, for at høre om dine ønsker er gået i opfyldelse?

Kommentar
Fra : molokyle

Dato : 29-10-05 06:14
christofferd -> Du har flere besvarede spørgsmål stående åbne. Synes du ikke du burde lukke dem? Der står selvfølgelig ingen steder du SKAL lukke et besvaret spørgsmål, men synes du ikke selv det er en smule uhøfligt for de der har prøvet at hjælpe dig, bare at lade stå til?

</MOLOKYLE>

Du har følgende muligheder
Dette spørgsmål er blevet annulleret, det er derfor ikke muligt for at tilføje flere kommentarer.
Søg
Reklame
Statistik
Spørgsmål : 177428
Tips : 31962
Nyheder : 719565
Indlæg : 6407943
Brugere : 218877
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.