I'm in the process of creating a header section for a webapp. I'm having some difficulty aligning and positioning things the way it should.
The logout button you see there on the right should move up into the light grey area. So in other words, in the same lign as the logo. This is the html for that section:
<div>
<img src="Images/logo.png" id="imgLogo" alt="" />
<img src="Images/logout-idle.png"
alt=""
id="imgLogout"
onmouseover="this.src='Images/logout-hover.png'"
onmouseout="this.src='Images/logout-idle.png'"
onmousedown="this.src='Images/logout-down.png'"
/>
</div>
The CSS for these elements:
#imgLogo{
margin: 0 auto;
display: block;
}
#imgLogout{
float: right;
margin-top: 4px;
margin-right: 10px;
}
What am I doing wrong? What can I do to get that darn logout button to move more to the top?
Thanks in advance!
If you set the
#imgLogout{
float: right;
margin-top: 4px;
margin-right: 10px;
}
to
#imgLogout{
position: absolute;
top: 4px;
right: 10px
}
this will put it where you want it.
For the img logo, I would make an div element and have that as a background so like:
#imglogo{
background: url('Images/logo.png') no-repeat;
}
Then for the log out button I would put that inside the div like so:
<div id="imglogo">
<img src="Images/logout-idle.png"
alt=""
id="imgLogout"
onmouseover="this.src='Images/logout-hover.png'"
onmouseout="this.src='Images/logout-idle.png'"
onmousedown="this.src='Images/logout-down.png'"
/>
</div>
I hope that helped.
You should set width for each element. Second img should has
display: block
as well.
Or you could use something like this
#imgLogout{
float: right;
margin-top: 4px;
margin-right: 10px;
}
#imgbg {
background-image: url(Images/logo.png);
background-position: 50% 50%;
background-repeat: no-repeat;
}
<div id="imgbg">
<img src="Images/logout-idle.png"
alt=""
id="imgLogout"
onmouseover="this.src='Images/logout-hover.png'"
onmouseout="this.src='Images/logout-idle.png'"
onmousedown="this.src='Images/logout-down.png'"
/>
</div>
Related
I am basically just trying to have the main picture surrounded by the two smaller arrows. What am I missing here?
.buttonsImage {
background-image: url('http://celineburnand.com//img/menu/navigation_menu.png');
background-repeat: no-repeat;
background-size: 217px;
display: block;
float: left;
height: 24px;
vertical-align: text-center;
}
div#beforeBtn {
background-position: -17px -41px;
width: 21px;
}
div#afterBtn {
background-position: -50px -40px;
width: 21px;
}
<article style="overflow-y: scroll;" class="image-detail">
<div id="beforeBtn" class="buttonsImage"></div>
<img id="main-drawing" src="http://celineburnand.com/img/drawings/6.jpg" width="640" height="200" alt="" style="display: inline;">
<div id="afterBtn" class="buttonsImage"></div>
<p><span style="font-style:italic">Circuit</span>, charcoal on paper, 200 x 150 cm, 2014</p>
</article>
https://jsfiddle.net/ubwr370L/
With your current markup, make both arrow divs display: inline; and remove float: left;. Then apply vertical-align: middle; to both divs and the img.
https://jsfiddle.net/ubwr370L/1/
Add:
.image-detail {
white-space: nowrap;
}
to avoid the arrows being moved if the width is insufficient.
I want to have a nice looking box AND a nice looking logo in that box (logos are for example purpose only).
BUT I don't know how to do that.
I have my image tag look like this
<img class="col-sm-12 pull-right" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
If I include the width="200" height="200" in the <img> tag, my view will look like this.
I got a nice looking box, but ugly logo(stretch).
Else if I include the width="200" only in the <img> tag, my view will look like this.
I got a nice looking logo, but ugly box(doesn't line up).
Either way, I chose will screw up my view. :(
You could put your image in a 200x200 div and center your image (but not stretch it) inside it like this:
.imgbox{
border:solid 4px grey;
border-radius:5px;
width:200px;
height:200px;
display: table-cell; vertical-align: middle
}
<div class="imgbox">
<img src="http://img3.wikia.nocookie.net/__cb20100520131746/logopedia/images/5/5c/Google_logo.png">
</div>
Using the background-size property is the simplest way.
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
* { margin:0; padding:0 }
figure.logo {
width: 200px;
height: 200px;
background-image: url('http://i.imgur.com/F0RRqFy.jpg');
background-size: cover;
}
<figure class="logo"></figure>
Editable Demo: http://jsbin.com/gituzu/2/edit?html,css,output
you can center the images horizontal and vertical to the parent width and height by using position: absolute;:
HTML:
<div class="img_wrap">
<img src="https://pbs.twimg.com/profile_images/453545705622106112/6ERHbJBN.jpeg" />
</div>
<div class="img_wrap">
<img src="http://wottageek.com/wp-content/uploads/2014/10/Dropbox-Logo.png" />
</div>
<div class="img_wrap">
<img src="https://longren.io/wp-content/uploads/2014/04/do.png" />
</div>
CSS:
.img_wrap
{
width: 200px;
height: 200px;
position: relative;
float: left;
margin-right: 10px;
border: 5px solid #ccc;
}
.img_wrap img
{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
example: http://jsfiddle.net/82bhzxfe/
I have just re-done my website at www.chartoonz.com
I have created a wrapper div in which I have placed a div with a links to my videos on vimeo. I float this div left, next to it I have floated a div with some text about the movie and floated it right. The columns look ok, until the window resizes. Then they overlap terrribly and I cannot figure out why. In the event of a narrow window resize, I want the right float column to jump underneath the left floated column.
The relevant HTML looks like this:
<div id="CopyWrapper" >
<div class = "copyFloatLeft">
<p><strong>Use Video to Communicate.</strong></p>
<p><iframe src="//player.vimeo.com/video/90334225" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
<br />
</p>
<br /><br />
</div>
<div class = "copyFloatRight">
<strong>Corporate Communications</strong>
<p> Corporate communications can be greatly enhanced through a well presented video. Ideas and concepts are easier to understand when they can be seen clearly and their meaning is made plain. Here, I present some of the work I did over the last few months, helping the Merrill Lynch digital advertising division get their message out.</p>
</div>
<br />
</div>
<br class="clearFloat" />
The governing CSS looks like this:
#CopyWrapper{
background: center;
text-align: left;
display: block;
float: left;
width: 65%;
padding-left: 200px;
position: relative;
margin: 0 auto;
clear: both;
overflow: hidden;
}
.copyFloatLeft{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: left;
display: block;
}
.copyFloatRight{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: right;
display: block;
}
Any help would be appreciated.
Aharon
.copyFloatLeft and .copyFloatRight blocks should both float to the left
and for the iframes I would do something like:
#CopyWrapper iframe {
width: 100%;
}
Here is an image that illustrates my goal:
http://imgur.com/80v5bRk
What would be the best way to achieve a style that looks like this? By this, I am asking, how can I set up rules so that the spacing and locations of the buttons are perfectly aligned in the center (they are not aligned correctly right now). I was thinking of a div that wraps the whole thing together, a div that floats left holding the first angle and the title, and a second div that floats left holding the icons. The icons are from the font-awesome package and I do not understand how to align them correctly.
Something along the lines of this should do:
HTML:
<div class="bar">
<div class="first button"></div>
<dic class="second button"></div>
</div>
CSS:
.bar{
width: 960px;
height: 60px;
margin: 0 auto 0 auto;
padding: 5px;
}
.button {
width: 50px;
height: 100%;
float: right;
margin-right: 10px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center; /* This is what will centralize it vertically and horizontally */
}
.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }
I hope this helped.
Well, its hard to answer it exactly unless you post what you currently have.
However, your on the right track.
What I would do:
Wrap the whole thing in a div (as you said)
float the text left (which you said as well)
float the icons right (not left)
As far as spacing, put a margin/padding left/right to the two buttons.
EDIT:
As per my discussion with Luiz Berti:
You are almost right.
Try this instead:
http://jsfiddle.net/GYPK5/1/
HTML
<div class="bar">
<div class="text">Lots of stuff here</div>
<div class="buttons">
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
</div>
<div class="clear"> </div>
</div>
CSS
.bar {
width: 400px;
border: 1px solid black;
height: 20px;
font-size: 16px;
line-height: 20px;
}
.text {
margin-left: 20px;
float: left;
width: 200px;
}
.buttons {
float: right;
margin-right: 20px;
position: relative;
top: 2px;
}
.buttons img {
margin: 0 10px;
}
.clear {
clear: both;
width: 0;
height: 0;
}
I would like to know how i could use css to have a line go through the center of a logo image. See link below:
Example
Thanks
Julian
Here's one approach using absolute positioning
<div>
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0"></div>
<img style="position:absolute;top:0;left: 45px" src="http://placehold.it/100x150" />
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0;left:160px"></div>
</div>
example
This should work
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
<img src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" width="40px" height="47px"></img>
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
I set the relative position of each div to -20px because 20 is half of the height of the logo image. So if your logo image SRC is 80 pixels tall than set both divs to top:-40px;
Working Example: http://jsfiddle.net/Edd6j/2/
Here's one approach, it uses an absolutely positioned span as the strike through, and a div with the span and image in it to position the strike through, here's a working example
and here's the code.
<div class="logo-container">
<span class="logo-line"></span>
<img class="logo" src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" alt="apple logo"></img>
<span class="logo-line"></span>
</div>
css:
.logo-container {
position: relative;
height: 87px;
width: 35%;
margin: 0 auto;
min-width: 144px;
}
.logo {
position: relative;
width: 72px;
height: 87px;
z-index: 2;
}
.logo-line {
position: relative;
display: inline-block;
top: -50%;
width: 20%;
height: 2px;
background: #333;
}