We help IT Professionals succeed at work.

CSS (jquiry mobile) question

Steynsk
Steynsk asked
on
130 Views
Last Modified: 2017-04-27
Hi Experts,

I've e created a page that almost looks like I want it to look. But there are two aspects i don't like and maybe someone of you can help me.
In the image below you can see the text is placed in a cartouche. This went OK until I've added three buttons within in the cartouche. The hyperlink property of the buttons courses the cartouche and the background color to fade away. And in the last (bottom) post item there are two cartouches. One around the content and a second surrounding the first and including the buttons.

cartouche.png
The desired result should be a single cartouche surrounding the text and three buttons and a single background color in the cartouche.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-store" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<!--	<link rel="stylesheet" href="_assets/css/jqm-demos.css">-->
	<script src="js/jquery/jquery.js"></script>
	<script src="_assets/js/index.js"></script>
	<script src="js/jquery/jquery.mobile-1.4.5.min.js"></script>

<style>
	.blok {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 150px;
		margin-left: 150px;
		
	}
	
	#pageone .ui-header {
    background: #5069A0;
}

</style>

<script type="text/javascript">

function popupCenter(url, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" data-theme="b" data-swipe-close="false"> 
    <h2>Menu</h2>
   <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Sluit het menu</a></li>
			<li></li>
                <li><a href="index.html">Home (vodo)</a></li>
                <li><a href="#panel-responsive-page2">Vraag</a></li>
				<li><a href="#panel-responsive-page2">Aanbod</a></li>
				<li><a href="#panel-responsive-page2">De lift</a></li>
				<li><a href="#panel-responsive-page2">Ideeen bus</a></li>
				<li><a href="#panel-responsive-page2">Contact</a></li>
        </ul>
  </div> 




  <div data-role="header" data-position="fixed">
  <a href="#myPanel" >&#9776; &nbsp; menu</a><br>
  <p class="blok"><img src="plaatjes/umcg.jpg" width=100% alt="logo"  /></p>
</div>

  <div data-role="main" class="ui-content">
  <div  class="blok">  
	<h1><font color=rgb(41,90,95)>Binnengekomen (onderwijs) aanvragen</font></h1>
	<a onclick="popupCenter('OnderwijsBehoefteToevoegen.asp','Een (Onderwijs) behoefte toevoegen',1100,800);" href="javascript:void(0);" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-left">Een (onderwijs) behoefte toevoegen</a>
				<ul data-role="listview" data-inset="true">
					<li data-role="list-divider">Vrijdag, 13 april, 2017 <!--<span class="ui-li-count">2</span>--></li>
					<li><a href="progress.html">
						<h2>Tina Test</h2>
						<p><strong>Wil leren typen met 10 vingers</strong></p>
						<p>Hallo nu wij in de verpleging overgaan naar steeds meer digitaal werken lijkt het me handig om met tien vingers te kunnen typen. Vandaar de vraag om misschien iemand mij dit zou kunnen leren?</p>
						<p>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</p>
						</a>
						<p class="ui-li-aside"><strong><a href="progress.html">3 collega's willen dit ook!</a><br><a href="progress.html">1 Reactie op dit bericht</a></strong></p>
						</li>
					<li><a href="progress.html">
						<h2>Jan Fictief</h2>
						<p><strong>Kan iemand mij helpen met het opzetten van een slimme CV?</strong></p>
						<p>Ik ben eigenlijk wel toe aan iets nieuws en ben op zoek naar iemand die mij kan helpen bij het bijwerken van mijn CV en het sterker maken van mij LinkedIn profiel.</p>
						<p>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</p>
					</a>
					<p class="ui-li-aside"><strong><a href="progress.html">2 Reactie op dit bericht</a></strong></p>
					</li>
					<li data-role="list-divider">Maandag, 27 maart, 2017 <!--<span class="ui-li-count">1</span>--></li>
					<li><a href="progress.html">
						<h2>Karin Proef</h2>
						<p><strong>Zoekt een coach en klankbord voor nieuwe functie.</strong></p>
						<p>Ik heb een nieuwe aanstelling en ben nog wat onzeker over het P&O deel van deze functie daarom ben ik op zoek naar iemand die mij voor drie maanden kan begeleiden/coachen zodat ik een klankbord heb.</p>
						<!--<p class="ui-li-aside"><strong>4:48</strong>PM</p>-->
												<p>
						<a href="progress" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</p>
					</a>
					<p class="ui-li-aside"><strong><a href="progress.html">1 collega willen dit ook!</a><br><a href="progress.html">3 Reacties op dit bericht</a></strong></p>
					</li>
				</ul>
  </div>
</div>
  <div data-role="footer">
    <h1>Page Footer</h1>
  </div> 
</div>
	

</body>
</html> 

Open in new window


 I've added the code i'm using. Hope you can help.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Excellent Julian.

Thank you!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.