I have the problem that I want to have the hr element on my website under a text but I don't really know how to do it, I've already googled it so I hope someone can help me here is my problem
I created the hr element and just wanted it to be 50% and now I want it at the bottom above a text
I thought that the hr element would be just a little bit over the Text
<hr style="width:50%; text-align:bottom" />
<div class="footer">
Gemacht mit <span class="herz">❤</span> von
<a href="https://fastdropgaming.github.io">
<span class="fl">FastDrop Gaming</span>
</a>
<div>
<small>© <script src="assets/js/year.js"></script> FastDrop Gaming. Alle Rechte vorbehalten.</small>
</div>
<div>
<small></span>Impressum ● Kontakt ● >Datenschutz</div></small>
</div>
Apparently, in your real code (which you didn't post here completely, but which is what produces the screenshot you added), your footer has a fixed position (or something similar) at the bottom. So simply move the hr tag inside the .footer div to make it part of that footer (i.e. at the bottom):
.footer {
position: fixed;
bottom: 0;
}
<div class="footer">
<hr style="width:50%; text-align:bottom" /> Gemacht mit <span class="herz">❤</span> von <span class="fl">FastDrop Gaming</span>
<div>
<small>© <script src="assets/js/year.js"></script> FastDrop Gaming. Alle Rechte vorbehalten.</small></div>
<div><small></span>Impressum ● Kontakt ● >Datenschutz</div></small>
</div>
you should put the hr inside the general div "footer" :
<div class="footer">
<hr style="width:50%; text-align:bottom" />
Gemacht mit <span class="herz">❤</span> von <span class="fl">FastDrop Gaming</span>
<div>
<small>© <script src="assets/js/year.js"></script> FastDrop Gaming. Alle Rechte vorbehalten.</small></div>
<div><small></span>Impressum ● Kontakt ● >Datenschutz</div></small>
</div>
Related
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
i have following problem.
So i want to create a switch content on my Website.
I want to create that i can toggle with my navbar the content.
I dont have any Idea more...
This is my Code
<section class="content show" id="home">
<h1>Welcome</h1>
<h5>My new site is coming soon!</h5>
<p>ich werde diese Seite komplett neu aufbauen, ich hoffe das Ihnen meine neue Webpräsenz gefallen wird. <br><br> Mit freundlichen Grüßen, <br> <b> Alexander Constapel </b> </p>
<p>More info »</p>
</section>
<!-- /About Page -->
<section class="content hide" id="about">
<h1>About</h1>
<h5>Some facts about me!</h5>
<p>
<ul>
<li>Alexander Constapel </li>
<li>20.02.1994 </li>
<li>Ausbildung zum Mediengestalter in Digital und Print </li>
<li>Webdevelopment & Design </li>
</ul></p>
<p>Subscribe me on Facebook!</p>
</section>
<!-- /Contact Page -->
<section class="content hide" id="contact">
<h1>Contact</h1>
<h5>Get in touch!</h5>
<p>Email: Alook.de<br />
Phone: 05<br /></p>
<p>Jever<br />
Germany</p>
</section>
And this is my CSS to this:
.show {
display: block;
}
.hide {
opacity: 0;
}
.content {
color: deepskyblue;
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
Ofc my NAV have href to #home #about #contact
But it still dont work.
Please help me out.
Thanks a lot.
Alex
I can't get these to move to the center of the page. Anyone see what's wrong?
<ul id="contact">
<h1> Contact </h1>
<p> Dreamstowheels#yahoo.com </p>
<p> 2236 El Camino Real <br>
Santa Clara Ca 95050 </p>
</ul>
<ul id="follow">
<h1> Follow </h1>
<img src="http://www.flagera.eu/sites/all/modules/socialmedia/icons/levelten/glossy/32x32/facebook.png">
</ul>
<ul id="supporters">
<h1> Supporters </h1>
<p> Cyclinginquisition.com </p>
<p> Colombia Cycling Team </p>
<p> Calmar Bicycles </p>
<p> Rock Solid Cycling </p>
<p> Fast Freddie Foundation </p>
<p> Golden Creek Services (Envio de Paquetes) </p>
</ul>
</footer>
CSS
footer{ /*Footer section attributes */
margin: -50px auto;
width: 100%;
text-align: center;
/* border-top: solid 1px;*/
}
Let me know if you need to css for the contact, follow, and supporters divs. Thanks in advance.
Erase everything in your CSS code in fiddle and just put the following there.
footer{ margin:0 auto; text-align:center;}
https://jsfiddle.net/u2Zb2/45/
I am having trouble getting quotes (within divs) to line up properly.
This site is here
http://79.170.44.107/robinsonhambro.com/wp/.
What I need to do is line up the divs (with a class or id of hero) across a horizontal line along the top and the bottom of the picture. For some reason they dont seem to be sitting evenly.
Can anyone give me some help?
I assume the issue you are having is the quotes in the right hand side is a little lower than the other two DIVs.
One of the issues I saw was that there is an empty <p> in your right div. If you remove it, the text should line up with the rest of the DIVs. Remove this from your html: <p><!-- Right div hero section --></p>
Also, your .entry class has huge amount of padding in it,remove that and it should bring everything down closer.
I'd also recommend removing the other <p> tags and using margins for better control off the elements.
Here is my update to your html. This work from from browser.
Updated Style.CSS
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:50px 50px 45px 0;
becomes....
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:0 50px 45px 0;
Updated html
<div id="herobox">
<div id="left-hero">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2015/02/newdoor.jpg" width="265px" height="426px" alt="Robinson Hambro Door">
</div>
<div id="centre-hero">
<h1>
<p class="pcentre">Robinson Hambro specialises in Board Search and Chairman Advisory. The Firm advises companies with a global outlook drawing on the experience of a multilingual and multidisciplinary team.</p>
</h1>
<div class="subcentrehero">
<p class="p03">Robinson Hambro Chairman Advisory Service is priceless.Լ/p>
<p class="p04">- Carles Casajuana, former Spanish Ambassador to the UK</p>
</div>
<div class="subcentrehero">
<p class="p03">Robinson Hambro advice was invaluable and I could not recommend them more highly!</p>
<p class="p04">- Global COO of a $45bn firm</p>
</div>
</div>
<div id="right-hero">
<p class="p01">The process was carried out to a high standard, in a timely way, and I can therefore wholeheartedly recommend this service.</p>
<p class="p02">- Dr Andrew McCulloch, CEO, MHF</p>
<p class="p01">Karina knows everyone</p>
<p class="p02">Fiona Woolf, former Lord Mayor of the City of London</p>
<p class="p01">We would have no hesitation in highly recommending Robinson Hambro for an assignment in any sector.</p>
<p class="p02">- Robin Walker, Deputy Chairman, Berry Gardens</p>
</div>
</div>
<div style="clear:both"></div>
</article> <!-- end .entry -->
</div> <!-- end #main_content -->
</div> <!-- end #content_area -->
</div> <!-- end .container -->
</div> <!-- end #main-area -->
</div> <!-- end #page-wrap -->
<footer id="main-footer">
<div class="container clearfix">
<div id="footer-top-shadow"></div>
<div id="footer-widgets" class="clearfix">
<div class="footer-widget footer-col1"><div id="text-4" class="f_widget widget_text"><h4 class="widgettitle">INSIDER VIEW</h4> <div class="textwidget">Visit Karina's Column for insights on the world of finance by Robinson Hambro's Karina Robinson
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col2"><div id="text-5" class="f_widget widget_text"><h4 class="widgettitle">What We Do</h4> <div class="textwidget">Guiding Principles
<br/>
Chairman Counsel
<br/>
Board Search</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col3"><div id="text-6" class="f_widget widget_text"><h4 class="widgettitle">Get in touch</h4> <div class="textwidget">t: +44 (0) 20 3405 2355
<br/>
m: +44 (0) 7980 510 975
<br/>
e: info#robinsonhambro.com
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col4 last"><div id="text-3" class="f_widget widget_text"><h4 class="widgettitle">LINKS</h4> <div class="textwidget"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/women.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/bankers.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/youtube.png">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/googleplus.png"> </div>
</div></div> <!-- end . footer-widget --> </div> <!-- end #footer-widgets -->
<p id="copyright">Designed by Elegant Themes | Powered by WordPress</p>
</div> <!-- end .container -->
</footer> <!-- end #main-footer -->
I want to make an iPad HTML5/CSS3 based app and I found out about JQuery Mobile and tried to use it. Here what it looks like :
This is the summary page, when a user clicks on one of the grid element it should go to the proper detail page. (Click on grid "a" should go to an inner page with id "blockA" etc...).
I encoutered some problems and cannot find any clear clues on the net.
I want my header + photo and summary + "informations" bar to be fixed. The only solution I found is to copy/paste the header div into my "blockA" page and into the 5 others which I found really annoying. Basically I want my top screen to be fixed and my bottom screen to change on link navigation. I thought of using jquery append methods and such but is there any "native" way of doing so?
My header was really hard to bring like you can see it on the picture. I had to change the CSS a bit. Is there any easier way? Some class I missed in the JQuery structure CSS maybe? Can't find any exhaustive class list for JQM.
How to set heights for my different components without modifying CSS.
Here is some of my HTML code :
<body>
<div data-role="page" id="page_main" style="min-height: 496px; ">
<div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
<h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
<ul data-role="listview">
<li class="pta-file-content" data-icon="custom" data-theme="c">
<img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
<div class="ui-grid-a">
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='mail'>whatever.x#mail.com</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
</div>
<div class="ui-block-a">
<p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
</div>
</div>
</li>
</ul>
<h1 class="ui-title">Informations</h1>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<span id='ptaGetUserBlockA'>a</span>
</div>
<div class="ui-block-b">
<span id='ptaGetUserBlockB'>b</span>
</div>
<div class="ui-block-c">
<span id='ptaGetUserBlockC'>c</span>
</div>
<div class="ui-block-a">
<span id='ptaGetUserBlockD'>d</span>
</div>
<div class="ui-block-b">
<span id='ptaGetUserBlockE'>e</span>
</div>
<div class="ui-block-c">
<span id='ptaGetUserBlockF'>f</span>
</div>
</div>
</div>
<div data-role="page" data-title="Page Foo" id="blockA">
<div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
<h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
<ul data-role="listview">
<li class="pta-file-content" data-icon="custom" data-theme="c">
<img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
<div class="ui-grid-a">
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='mail'>whatever.x#mail.com</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
</div>
<div class="ui-block-a">
<p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
</div>
</div>
</li>
</ul>
<h1 class="ui-title">Informations</h1>
</div>
mon bloc A
</div>
</body>
Don't look at the ptaGetUser spans, it's for my later persistence framework that I should work on to add seamless persistence to HTML pages like this. For now though this is just here for nothing. I've also only added the first block for this exemple.
My CSS to make this the right dimension :
.ui-title,.ui-title
{
height:24px;
}
.banner
{
height:45px;
padding: 0px 15px !important;
}
.ui-li-thumb, .ui-li-icon {
max-width:165px;
max-height:165px;
}
.pta-file-content
{
height:148px;
}
.ui-li-has-thumb
{
padding-left: 165px !important;
}
.ui-grid-a
{
padding-top: 5px;
}
.ui-grid-b
{
height:543px;
width: 1022px;
}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c
{
height:50%;
width:32%;
border: 1px solid black;
}
The whole screen slides when I click on the first grid element to show the page. As you can see I've copied the whole header into my second page div which is really bad for code readability. I also have CSS problems with my grid borders as it doesn't show bottom borders, how can I add borders to a grid without modifying CSS?
1) jQuery Mobile doesn't currently offer persistent headers and footers, but an upcoming version, 1.1, will. Whether or not they stay on the page during transitions is something that has not yet been answered. Your best bet is to use some sort of server-side language for your pages, then set the header as an include. That way you don't have to copy and paste across multiple pages.
2) jQuery Mobile is great for building apps, but to get something truly custom, you've got to write it yourself; be that CSS or HTML or both.
3) Only way to achieve custom heights for your elements is to write custom CSS.
It sounds like you are trying to do a lot without modifying CSS. Why is that a requirement of your project?
It sounds like you are looking for a persistent header. Start here with the JQM Footers documentation. They cover persistence and it should be the same for headers. If the JQM docs do not solve this issue, check out this other Stackoverflow post.
If you are looking for a custom configuration, check out the very bottom of this documentation on JQM headers. If that doesn't quite do it you may also try the JQM layout grids. Otherwise, you will need CSS, be it inline or otherwise.
While I am not sure I completely understand the problem here, I have heard that CSS/HTML should be used to control layout width, but not height. Sorry, having trouble finding the articles to back that up so lets just consider that one design philosophy. Just the same, this post tells you how to evenly balance height with CSS.
As for your last question about borders, you would have to use CSS to control them. Whether or not you do it inline or a stylesheet like one created with the JQM Themeroller, I am not aware of any other way of styling borders other than CSS.
Hope this helps!