2 elementen krijg ik niet mooi gepositioneerd

Status
Niet open voor verdere reacties.

kodro1

Gebruiker
Lid geworden
25 dec 2011
Berichten
79
Hallo,

in bijlage 2 screenshots van een website die ik aan het maken ben. De "oke.jpg" toont de homepage, met naast de titel "9 per pagina" en "sorteer op datum" mooi en correct gepositioneerd. Als ik echter ga naar de pagina stoffen dan zijn die 2 elementen niet meer mooi gepositioneerd (naast de breadcrumbs): ze moeten gewoon naast elkaar staan. Zie "niet-oke.jpg"

De css-code van deze elementen is:

form.woocommerce_ordering, form.woocommerce-ordering {
float:right;
margin:0.8em 0 2em;
}

form.woocommerce_ordering select, form.woocommerce-ordering select {
border:1px solid #B2B0B0;
font-size:1em;
margin-left:5px;
padding:5px;
}

Het is wellicht iets simpels (hoop ik toch), maar ik krijg het niet opgelost... :-(
Bedankt voor de hulp!

oke.jpgniet-oke.jpg
 
Je geeft geen html en zeer weinig css. Met alleen de css van form en select kan er denk ik geen antwoord op je vraag worden gegeven. select staat normaal inline dus misschien heb je ergens verder in de css een display block of een te grote margin/padding gegeven. Suc6 met debuggen.
Misschien weet iemand anders een oplossing?
 
Laatst bewerkt:
sorry, was inderdaad te summier met mijn code. Hopelijk hebben jullie hier iets mee:

html:

<div id="primary" class="layout-sidebar-left group">
<div class="inner group">
<div id="content" role="main">
<form class="woocommerce-ordering" method="get">
<select name="orderby" class="orderby">
<option value="menu_order">Standaard sortering</option>
<option value="popularity">Sorteer op populariteit</option>
<option value="rating">Sorteer op gemiddelde beoordeling</option>
<option value="date" selected="selected">Sorteer op datum</option>
<option value="price">Sorteer op prijs: laag naar hoog</option>
<option value="price-desc">Sorteer op prijs: hoog naar laag</option>
</select>
<input type="hidden" name="cs_preview" value=""/>
</form>
<div id="breadcrumb">
<a class="home" href="http://www.xxxx.be">Home</a>
» Stoffen
</div>
<h1 class="page-title"/>
<div class="clear"/>
<form class="woocommerce-ordering" method="post">
<select name="per_page" class="per_page" onchange="this.form.submit()">
<option value="9" selected="selected">9 per pagina</option>
<option value="18">18 per pagina</option>
<option value="27">27 per pagina</option>
<option value="36">36 per pagina</option>
<option value="45">45 per pagina</option>
</select>
</form>

CSS:

#content {
width:100% !important;
}

lessthen960.css (line 6)
#content {
}

style.css
#content {
float:right;
width:75%;
}

style.css
.layout-sidebar-right #sidebar, .layout-sidebar-left #content {
float:right;
}

#breadcrumb {
color:#999999 !important;
font-size:0.92em;
margin:0 0 1em !important;
overflow:hidden;
padding:0;
zoom:1;
}

form.woocommerce_ordering, form.woocommerce-ordering {
float:right;
margin:0.8em 0 2em;
}

form.woocommerce_ordering select, form.woocommerce-ordering select {
border:1px solid #B2B0B0;
font-size:1em;
margin-left:5px;
padding:5px;
}
 
html volgorde aangepast > breadcrumb, page-title, form, form.
div.clear uit html gehaald
De h1 (block-level) in css een float gegeven zodat deze niet 100% breed is.
html
Code:
<div id="primary" class="layout-sidebar-left group">
<div class="inner group">
<div id="content" role="main">
	<div id="breadcrumb">
	<a class="home" href="#">Home</a> » Stoffen
	</div>
	<h1 class="page-title"/>Stoffenaanbod bij Blablah</h1>
	<form class="woocommerce-ordering" method="get">
	<select name="orderby" class="orderby">
	<option value="menu_order">Standaard sortering</option>
	<option value="popularity">Sorteer op populariteit</option>
	<option value="rating">Sorteer op gemiddelde beoordeling</option>
	<option value="date" selected="selected">Sorteer op datum</option>
	<option value="price">Sorteer op prijs: laag naar hoog</option>
	<option value="price-desc">Sorteer op prijs: hoog naar laag</option>
	</select>
	<input type="hidden" name="cs_preview" value="" />
	</form>
	<!-- div class="clear">&nbsp;</div -->
	<form class="woocommerce-ordering" method="post">
	<select name="per_page" class="per_page" onchange="this.form.submit()">
	<option value="9" selected="selected">9 per pagina</option>
	<option value="18">18 per pagina</option>
	<option value="27">27 per pagina</option>
	<option value="36">36 per pagina</option>
	<option value="45">45 per pagina</option>
	</select>
	</form>
</div>
</div>
</div>
css
Code:
* { /*alleen voor test*/
	margin: 0; padding: 0; border: 0;
	outline: 0; font-size: 100%;
}
.clear { /*alleen voor test*/
	clear: both; display: block; float: none;
	width: 0; height: 0; font-size: 0;
	margin: 0; padding: 0; border: 0;
	background: none; position: static;
	overflow: hidden; visibility: hidden;
}
/* -------------------- */
#content {
	width: 100% !important;
}
/* @media width < 960 */
  #content {
	float: right;
	width: 75%; /*werkt niet door important hierboven*/
  }
  .layout-sidebar-right #sidebar,
  .layout-sidebar-left #content {
	float: right;
	BACKGROUND: #ff0; /*TEST*/
  }
  #breadcrumb { /*volledige breedte*/
	color: #999 !important;
	font-size: 0.92em;
	margin: 0 0 1em !important;
	overflow: hidden;
	padding: 0;
	zoom: 1; /*weet niet of dit w3c is*/
	BACKGROUND: #f00; /*TEST*/
  }
  #content .page-title { /*toegevoegd*/
	float: left;
	font-size: 1.5em;
	margin-top: .8em;
	BACKGROUND: #f00; /*TEST*/
  }
  form.woocommerce_ordering,
  form.woocommerce-ordering {
	float: right;
	margin: 0.8em 0 2em;
	BACKGROUND: #f00; /*TEST*/
  }
  form.woocommerce_ordering select,
  form.woocommerce-ordering select {
	border: 1px solid #b2b0b0;
	font-size: 1em;
	margin-left: 5px;
	padding: 5px;
  }
/*} end @media*/
Als de volgorde in de html niet veranderd kan worden vanwege andere pagina's dan heb ik meer nodig dan bovenstaande code.
Veel suc6.
 
beste bron,

bedankt voor je hulp! Ik weet niet hoe ik de volgorde in de html moet aanpassen, kan dat zomaar in een wordpress site?
Mag ik je de webpagina persoonlijk naar je doorsturen? (dus html pagina en beelden in een zip)
Waarna je me laat weten hoe ik het moet aanpassen?

Alvast 1000x dank!
 
Hi Kodro1, ik ben bereid iedereen op onderdelen te helpen, maar dit past meer in personeel gezocht. Je kunt wel een screenshot posten met de url van de website als deze online staat. Als je aangeeft welke pagina oke is en welke niet oke is dan wil ik kijken of het met een css aanpassing te doen is (en niet tt veel tijd kost).
 
Hallo bron,

nogmaals dank voor je hulp. Probleem is dat de website nog niet online staat, dan kun je dus niet checken. Anders laat ik het voorlopig gewoon zo, totdat die online gaat en geef je dan de url. Da's wel pas midden/eind augustus.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan