I cannot find the solution on the web. So I post here.
I want to create a bar with 2 items, one at the left-end, and one at the the right-end :
'text' ... ... 'img'.
'img', because I'm also looking how to place an icon...
Here's what I want :
https://www.youtube.com/watch?v=nQK0kz65wpo&list=UUpOIUW62tnJTtpWFABxWZ8g
See at 9:07.
Unfortunately, he doesn't tell how he does that in his tutorial.
You can see there's an empty element between 'Menu' and the icon.
<div>
<div class="handle">Menu</div>
<div class="icon"></span>
</div>
Thanks,
Patrick
Please try this: jsFiddle.
HTML:
<html>
<body>
<div>
<div class="handle">Text goes here</div>
<div class="icon">Image goes here: <img src="" /></div>
</div>
</body>
</html>
CSS:
<style>
.handle {
float: left;
}
.icon {
float: right;
}
</style>
Related
I am using left: auto; in the hope of overriding left: 0; but it is not working (see jsfiddle) - I want <header class="h1..."> to be center aligned.
HTML:
<div class="root">
<header class="h1 header-opacity-enabled sticky-enabled sticky-no-topbar menu-animation-enabled hover-delay-enabled sticky-collapse sticky-opacity-enabled with-search-box with-cart-box lr-mi-with-widget-visible sticky" data-sticky-trigger-position="400" data-menu-slidedown-duration="400" data-menu-slideup-duration="500" data-menu-fadein-duration="300" data-menu-fadeout-duration="400" style="top: 0px;">
<section class="main-header">
<div>
<div itemtype="http://schema.org/Organization" itemscope="itemscope" class="title">
<div class="logo-wrapper"> <a class="logo" href="https://websitetechnology.dev/" itemprop="url"> <img alt="Doig Website Technology" src="https://websitetechnology.dev/wp-content/uploads/2016/04/logo3-blue.png" itemprop="logo" height="77"> </a>
<h3>Website Engineering, Optimisation & Advertising</h3>
</div>
</div>
</div>
<div class="shopping-bag">
<div class="widget woocommerce widget_shopping_cart">
<div class="widget_shopping_cart_content">
<div class="wrap">
<p class="empty-item">There are no items in your cart.</p>
<!-- end product list -->
</div>
</div>
</div>
</div>
</section>
<div class="s-801"></div>
<div class="s-981"></div>
</header>
</div>
CSS:
.h1.sticky.sticky-opacity-enabled .main-header {
background-color: #FFFF00;
}
#media screen and (min-width: 801px) {
.root header.sticky-enabled.sticky {
margin: 0 auto;
width: 1236px;
padding: 0;
max-width: calc(1070px + 10%);
}
.root header.sticky {
position: fixed;
top: auto;
left: auto;
width: 100%;
}
}
Live site here. Scroll half way down the page until the sticky <header> pops down from the top of the window.
left: auto; is being applied, yet the <header>' is stuck to the left side of the screen. This` needs to be center aligned.
Can you help please?
I have try to solved you and attached screenshot please find it. screenshot will help you to solved your issue.
Thanks,
It must be because css specificity. In a few words:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of CSS selectors of different sorts.
If you give more specific selector, you can override the settings.
In Example, a more specific selector then your would be:
div.root header.sticky {
or
body div.root header.sticky {
...
This could help: Specificity calculator
Also, if you view in Chrome i.e. you can see if a css settings was overriden by being marked as struck through
put your header inside this section
<section style="padding: 0;max-width: calc(1070px + 10%);margin: 0 auto;">
<!--- put your header section here ---->
</section>
With the CSS code posted below, I thought that I would be making a nav bar that extends the width of the browser and has a red background. I also thought I would be making the logo for the page appear ont he far left, with the text immediately to the right. What do I need to do to make a #ff0000 nav bar extend the whole width of the browser? How can I align this text to be to the right of the logo and at the top of the browser window?
Here is the CSS code:
.logo{
float:left
}
.titletext {
text-align: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Here is the HTML code:
<DOCCTYPE = HTML>
<html>
<head>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</head>
</html>
JS Fiddle
Never write code inside the <head> tag, you should use float:right for .titletext
HTML
<body>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<div class="clearfix"></div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
CSS
.clearfix
{
clear:both;
}
.logo{
float:left
}
.titletext {
float: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Your HTML is not valid. You insert content into head tag.
Check this DEMO
<head>
<title>Your title</title>
</head>
<body>
<!-- Place here your content -->
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
I'm working on the "About Us" header on this page
Basically the little div there with the images and blue "About Us" block was an image, but for SEO purposes, I'm now replacing it with a structure that can use an <h1>...</h1> tag.
As you can see, the layout of the images and header tag works perfectly, but it's pushed the right column of the page in under the content.
I've checked, and double-checked and it looks like all floats are properly contained (unless I missed something) so I'm not sure how to fix this.
Can anyone tell me what I'm doing wrong here?
The HTML:
<div class="page_header">
<div>
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
<h1>About Us</h1>
</div>
</div>
The CSS:
/* Page Headers
----------------------------*/
.page_header div {
overflow: hidden;
min-width: 665px;
}
.page_header img, .page_header h1 {
float: left;
margin: 10px 10px 0 0;
}
.page_header img:nth-child(2) {
clear:right;
}
.page_header h1.about-us {
line-height: 90px;
background: #00f;
color: #fff;
padding: 0 42px;
}
Thanks in advance!
Hey Ortund Actually wrote a HTML markup in bit of improper way so you should write like this :-
<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>
see the attached image its working fine through this method :-
That is because your <div id="sidebar-parimary"> should reside inside the <div id="main"> element.
Currently it is:
<div id="main">
<div id="content">...</div>
</div>
<div id="sidebar-primary">..</div>
it should be:
<div id="main">
<div id="content">...</div>
<div id="sidebar-primary">..</div>
</div>
Basically i am working on something and up until today everything was fine but im working with others and last night files were edited so when i updated my subversion things had gone a bit pear shaped! Basically i need to figure out whats happened to my nested divs, which are no longer nested and i've spent all day trying to fix it with no joy so hopefully someone can please tell me whats going on!
<div id="navbar">
<!--<div id="notification-icon">
</div><!--End of notification icon-->
<!--<ul id="nav-icons">
<li></li>
<li><img src="images/home-icon.png" alt="Home" /></li>
</ul><!--End of navigation icons-->
<div id=searchBar><!--start of search bar div-->
<input type="text" name="inputString" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" placeholder="Search People"/>
<div class="suggestionBox" id="suggestionBox" >
<!-- <img src="images/upArrow.png" style="position:relative; top:-12px; left:30px;" align="left"/> -->
<div align="left" class="suggestionList" id="autoSuggestionsList"></div>
</div> <!--end of suggestionBox-->
</div><!--end of search bar-->
</div><!--End of navbar-->
</div><!--end of topbar-->
<div id="prof-wrapper">
<div class="prof-content-main">
<div id="left_col">
</div><!--end of left-col-->
<div id="right_col">
</div><!--end of right-col-->
</div><!--End of content-main-->
</div><!--End of Wrapper-->
<script type="text/javascript" src="js/jquery.transit.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 2,
columns : 3,
w1024 : {
rows : 3,
columns : 3
},
w320 : {
rows : 2,
columns : 3
},
w240 : {
rows : 2,
columns : 3
}
} );
});
</script>
Im not too sure how to format my css to post it but Ive attached an extremely stripped down version of whats happening in this fiddle:
http://jsfiddle.net/DannyW86/ZMScG/
You can see that for some reason my wrapper isn't wrapping around the two columns that ive made it just kind of sits on top and overlaps a bit! Really irritating me at this point!!
It's just issue of floating, you can have 2 approaches, either add this in your HTML to clear floats
Demo
<div style="clear: both;"></div>
Or add overflow: hidden; in #prof-wrapper
Overflow Demo
The problem is that the left_col and right_col divs are floated which stops the containing div from expanding to their height.
Either use an empty div after the floated elements with clear:both
<div style="clear: both;"></div>
Or the CSS clearfix solution which does not require any empty div and so is better formed markup.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
With this solution you'd add the clearfix class to the containing/wrapping div.
Why images appear in such manner , .. ?
<div id='container'>
<div class='imgContainer'>
<div class='myLocation'>
<img src='https://graph.facebook.com/1055505/picture' style='width:30px'>
Tova Schherr
</div>
</div>
<div class='imgContainer'>
<div class='myLocation'>
<img src='https://graph.facebook.com/1205050/picture' style='width:30px'>
Alison Carmel
</div>
</div>
..... ..
......
</div>
you must know that the data are sample to show the example, so it will not work.
here is CSS class for myLocation
.myLocation
{
margin-bottom:1px;
width:100%;
background-color:#F7F7F7;
color:#006699;
padding:7px;
padding-right:12px;
}
Maybe, your doctype require to close the image tag.
<img src="" />
Try to use fixed height on .imgContainer
.imgContainer {
height:80px;
vertical-align:middle;
}