"Inner border"?

Door Machiel K op 15-10-2014 20:36

2.010 views

Hallo.

Ik zou graag iets willen maken als het volgende:

Een div, in mijn geval een list-item (li) met daarbinnen een gestreepte rand.

Ik heb het volgende.

HTML


<ul>
	<li><div class="border"></div></li>
	<li><div class="border"></div></li>
	...
	...
</ul>

CSS


....

li {
	...
	...
	float: left;
	position: relative;
	...
}

#border {
	background: red;
	position: absolute;
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;	
}

Op deze manier zou ik in elke list-item een div moeten zetten.. dat is een "slordige" manier in mijn gedachte denk ik.

Hebben jullie misschien een "nette" manier?

Frank Nietbelangrijk

16-10-2014 08:51 gewijzigd op 16-10-2014 09:45

een <div> in een <ul> is ongeldige HTML inderdaad. Dus zul je helemaal van de <ul> moeten afstappen en het helemaal in divs moeten maken. Iets wat overigens prima kan.

http://codepen.io/anon/pen/iLCFt?editors=110


<div class="menu">
  <div class="menuitem"><div><a href="#">Home</a></div></div>
  <div class="menuitem"><div><a href="#">About</a></div></div>
  <div class="menuitem"><div><a href="#">Contact</a></div></div>
  <div class="clear"></div>
</div>

<div class="menu inline">
  <div class="menuitem"><div><a href="#">Home</a></div></div>
  <div class="menuitem"><div><a href="#">About</a></div></div>
  <div class="menuitem"><div><a href="#">Contact</a></div></div>  <div class="clear"></div>
</div>


.menu {
  margin-bottom:10px;
  background: lightgreen;
  padding:5px;
}

.menuitem {
  width:150px;
  margin:5px;
  padding:5px;
  background: #333;
}

.menuitem div {
  border:1px dashed gold;
  color: gold;
}

.inline .menuitem {
  float:left;
}

.clear {
  clear:both;
}

.menuitem a {
  display:block;
  padding:5px;
  color: gold;
  text-decoration:none;
  text-align:center;
}

Wouter J

16-10-2014 10:01

Frank, je weet niks van de content. Hoe kun je dan een uitspraak doen of je van de <ul> af mag stappen?

Een <div> in een <li> kan trouwens perfect (in een <ul> niet, maar daar vraagt de TS ook niet om).

Semantisch gezien zou een <article> element helemaal niet misstaan op deze plek, maar als je het toch graag zonder wil doen hier 2 technieken: http://jsbin.com/huqapo/1/watch

Frank Nietbelangrijk

16-10-2014 10:18 gewijzigd op 16-10-2014 10:20

Hoi Wouter, wat raar ik had een testje gedaan op w3c en kreeg daar een foutmelding op. (Die zijn ook niet heilig natuurlijk)

Heeft het voordelen om met <article> elementen te werken?

Wouter J

16-10-2014 10:21

>> Heeft het voordelen om met <article> te werken?

In dit geval betreft het naar mijn idee een lijst met quick links naar enkele veel gebruikte pagina's in de website. Het bestaat uit een titel, thumbnail, introductie tekstje en een link. Dat duidt semantisch dus op een article en daarom zou ik ook aanraden hier in HTML een artikel van te maken (HTML is immers alleen het geven van semantische waarden aan plain text).

Frank Nietbelangrijk

16-10-2014 10:30 gewijzigd op 16-10-2014 10:30

>> HTML is immers alleen het geven van semantische waarden aan plain text.

Dat is misschien precies de reden waarom ik (de nieuwe) semantische elementen zo weinig gebruik.

Machiel K

17-10-2014 15:58

Bedankt heren, het is gelukt. Ik heb de outline techniek gekozen.

Reageren

Inloggen om te reageren