Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
AbonnerSkjul
Host1.no - Webhotell fra 29,-, virtuell server fra 249,-. 15% rabatt med rabattkode "nFF". Besøk oss på Host1.no!
  6 891
Vikingor
<?=getUserTitle()?>
319 52
11. juli 2012
Heisann!
Hvordan kan jeg få til dette?
http://bildr.no/thumb/1226187.jpeg

Jeg får kun til dette:
http://bildr.no/thumb/1226188.jpeg

Da mener jeg at under den aktive fanen så skal det ikke være noen border, slik som på det første bildet.
Sist endret av Vikingor; 11. juli 2012 kl. 14:41.
norboost
573 226
11. juli 2012

Kode

border-bottom: none;
?
ma10as
990 198
11. juli 2012
Det kommer jo helt an på hvordan du har kodet det opp. Om borden er satt på parent-elementet (<ul>, f. eks) så har du nok ikke noe annet valg enn å sette absolute position, øke z-index og legge den aktive knappen over. Det er mulig du kan sette en fast høyde på rammen rundt (parent) og be den aktive knappen være en px for høy i forhold. Om den legger seg over vet jeg ikke, og det vil nok variere fra browser til browser.

Et alternativ er å sette bakgrunnen (gradient?) samt den nedre borden som et bakgrunnsbilde (1px bredt som repeters). Da er det ikke noe problem å legge den aktive knappen over.
0xFF
War room
0xFF's Avatar
Donor
2.408 1.141
11. juli 2012
Du kan bruke CSS3 til å få det til, har ikkje vært borti det selv, men i følge CSS3 dokumentasjonen, så skal dette fungere:

Kode

border-color:gradient(start=[HEX], end=[HEX], midpoint=[PROSENT]);
Der du bytter ut [HEX] med hexadesimal tallet for fargen, og bytter ut [PROSENT] med ett tall mellom 0-100 etterfulgt av %.

Det er mulig du må bruke -moz og -webkit prefixes å.

EDIT: Samme teksten kom vist to ganger etter hverandre.
Sist endret av 0xFF; 11. juli 2012 kl. 15:52.
Realist1
Realist1's Avatar
4.134 3.369
11. juli 2012
Her er i alle fall ett eksempel: http://css.maxdesign.com.au/listamatic/horizontal05.htm
(Første treff på Google)
drittunge
drittunge's Avatar
3.238 1.767
11. juli 2012
Vil tro den enkleste måten å løse det på er å bruke "border-image", og bruke et 1px*høyde stort bilde med gradient som bakgrunn. Det er CSS3, så du burde lage en fallback-løsning med vanlig border til de som fortsatt bruker IE.

Edit: Her er eksempler med syntaks: http://css-tricks.com/understanding-border-image/
Sist endret av drittunge; 11. juli 2012 kl. 17:07.
Vikingor
&lt;?=getUserTitle()?&gt;
Trådstarter
319 52
11. juli 2012
Kan bare si at jeg bruke Bootstrap, og her er min css kode:

Kode

/*------------------------------------------------------------------
[Layout Stylesheet]
	Project:		gxPOS
	Version:		1
	Last Change:	xx/xx/xxxx
	Author:			Ole-Martin Bratteng

[Table of contents]

	1. Global
	2. Buttons
	3. Tabs

-------------------------------------------------------------------*/

/*------------------------------------------------------------------/
[1. Global]
*/
body{
	padding-top:80px;
	background-image:url("img/body-bg.png");
}
.navbar-inner{
	height:40px;
}
h2.step{
	color:#537893;
	text-align:center;
	font-size:20px;
}

/*------------------------------------------------------------------/
[2. Buttons]
*/
.btn.active{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-nav{margin-bottom:18px;}
.btn-nav a{font-size:20px;padding-top:20px;padding-bottom:20px;}
.btn-white{
	color:#D3D3D3;
	background-color:rgb(248,248,248);
	background-image:linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-o-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-webkit-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-ms-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(238,238,238)),color-stop(1, rgb(248,248,248)));
}
.btn-white:hover{
	color:#F3A732;
	background-color:rgb(248,248,248);
	background-image:linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-o-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-moz-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-webkit-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-ms-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(1, rgb(248,248,248)));
}
.btn-white.active{
	color:#F3A732;
	background-image:linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-o-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-moz-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-webkit-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-ms-linear-gradient(bottom, rgb(248,248,248) 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(1, rgb(248,248,248)));
}
.btn-white i{
	color:#D3D3D3;
}
/*------------------------------------------------------------------/
[3. Tabs]
*/
.nav-tabs{
	overflow:hidden;
	background-color:rgb(248,248,248);
	background-image:linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-o-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-webkit-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-ms-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(238,238,238)),color-stop(1, rgb(248,248,248)));
	-webkit-border-radius:4px 4px 0 0;
	-moz-border-radius:4px 4px 0 0;
	border-radius:4px 4px 0 0;
	border:1px solid #CCC;
	border-bottom:none;
}
.nav-tabs li a, .nav-tabs li a:hover{
	text-transform:uppercase;
	padding-left:10px;
	padding-right:10px;
	color:#989898;
	overflow:hidden;
	background-color:rgb(248,248,248);
	background-image:linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-o-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-webkit-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-ms-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(238,238,238)),color-stop(1, rgb(248,248,248)));
	border:none;
	margin:0 0 2px 0;
	border-right:1px solid #CCC;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
}
.nav-tabs li.active a:first-child{
	border:none;
	color:#989898;
	border-right:1px solid #CCC;
	background-color:rgb(255,255,255);
	background-image:linear-gradient(bottom, rgb(255,255,255) 100%);
	background-image:-o-linear-gradient(bottom, rgb(255,255,255) 100%);
	background-image:-moz-linear-gradient(bottom, rgb(255,255,255) 100%);
	background-image:-webkit-linear-gradient(bottom, rgb(255,255,255) 100%);
	background-image:-ms-linear-gradient(bottom, rgb(255,255,255) 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(1, rgb(255,255,255)));
}

.tab-content{
	padding:2px;
	border:1px solid #CCC;
	margin-top:-19px;
	background-color:white;
	-webkit-border-radius:0 0 4px 4px;
	-moz-border-radius:0 0 4px 4px;
	border-radius:0 0 4px 4px;
}
og html:

HTML-kode

<?php
date_default_timezone_set("Europe/Oslo");
?>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Point of Sale</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Le styles -->
		<link rel="stylesheet" href="./css/bootstrap.css">
		<link rel="stylesheet" href="./css/bootstrap-responsive.css">
		<link rel="stylesheet" href="./css/fonts.css">
		<link rel="stylesheet" href="./style.css">

		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<link rel="stylesheet" href="./css/font-awesome-ie7.css">
		<![endif]-->

		<!-- Le fav and touch icons -->
		<link rel="shortcut icon" href="./ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="./ico/apple-touch-icon-57-precomposed.png">
	</head>

	<body>

		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<div class="nav-collapse">
						<ul class="nav">
							<li class="active"><a><?=date("H:i, l, d F Y")?></a></li>
						</ul>
						<ul class="nav pull-right">
							<li class="active"><a>Logged in as <b>Jordan Payne</b></a></li>
						</ul>
					</div><!--/.nav-collapse -->
				</div>
			</div>
		</div>

		<div class="container">
			<div class="row">
				<div class="span12">
					<div class="btn-group btn-nav">
						<a class="btn btn-white span3">
							<i class="icon-shopping-cart" style="font-size:70px;margin-left:-55px;margin-bottom:35px;"></i><br><br>
							Sales
						</a>
						<a class="btn btn-white span3 active">
							<i class="icon-group" style="font-size:70px;margin-left:-55px;margin-bottom:35px;"></i><br><br>
							Customers
						</a>
						<a class="btn btn-white span3">
							<i class="icon-inbox" style="font-size:70px;margin-left:-55px;margin-bottom:35px;"></i><br><br>
							Inventory
						</a>
						<a class="btn btn-white span3">
							<i class="icon-tasks" style="font-size:70px;margin-left:-55px;margin-bottom:35px;"></i><br><br>
							Reports
						</a>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="span12">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#home" data-toggle="tab">
							Customer lookup
						</a></li>
						<li><a href="#profile" data-toggle="tab">
							New customer
						</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane fade in active" id="home">
							<h2 class="step">Step 2: Customer Details</h2>
						</div>
						<div class="tab-pane fade" id="profile">
							<h2>Step 2: Customer Details</h2>
						</div>
					</div>
				</div>
			</div>
		</div> <!-- /container -->

		<!-- Le javascript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="./js/jquery.js"></script>
		<script src="./js/bootstrap.js"></script>
		<script src="./js/page.js"></script>
	</body>
</html>
Men trur jeg ikke trenger å ha det sånn egentlig. Er ikke så viktig…
Sist endret av Vikingor; 11. juli 2012 kl. 18:14. Grunn: Feil i CSS