I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/
Related
Centering an element is normally done with the style="display:block;margin:0 auto" or in bootstrap 3 by simply using the center-block class, but somehow this cant be done if you want to center elements containing media class,
ie :
<div class="media">
<div class="center-block">
<div class="media-left"><img class="media-object" src="..."></div>
<div class="media-body">
<h4 class="media-heading">Header</h4>
<h5>Info</h5>
</div>
</div>
</div>
if I use the text-center class instead, only the media-body gets centered and the media-left element stays solidly in the same place
center-block only center the block element so you need to used particular block to used. To center text you have to used as you say text-center. I just create a sample here. Just check it an send us your feedback.
Demo - http://goo.gl/QrgSE1
While i have not found a way to do it using media bootstrap css, there is a simple way:
<div align = 'center'>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Here is a demo:
https://jsfiddle.net/tj2qx659/
I am trying to get my footer, which has a grey color to show this color all the way to the bottom in my responsive design. It goes all the way across the page when in PC view mode, when I take it to the mobile size, the box only shows for half of the footer and then cuts off. I am not sure why it's not working for me.
Thanks ahead of time for taking a look.
HTML:
div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Sitemap info 1</h4>
<p class="footertext">here is some site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Sitemap info 2</h4>
<p class="footertext">here is some more site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">sitemap info 3</h4>
<p class="footertext">This is some more of it.<br>
</center>
</div>
</div>
<div class="row">
<p><center>Contact Stuff Here <p class="footertext">Copyright 2014</p></center></p>
</div>
</div>
</div>
CSS:
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background-color:#B6B6B4;
/*
You are using col-md-4 classes for your grid, causing each column take a full row in mobile view and your footer is not going all the way to the bottom of page because of its fixed height (280px).
Try using col-xs-4 for x-small devices and appropriate classes for other windows sizes.
This can be achieved by doing something like <div class="col-md-4 col-xs-6">Content</div> which means this columns will use 4 grids in desktop view and 6 grids in mobile viewport.
More documentation can be found here, under 'Grid options' section.
By the way, <center> tag is obsolete, I would recommend you to use Bootstrap's text-center CSS class.
First of all I would recommend posting your code in jsfiddle for easier debugging: http://jsfiddle.net/r7mTc/
In jsfiddle above you will see that content of the footer is way higher than the footer itself and stick out of it.
Now look here: http://jsfiddle.net/r7mTc/1/ I just deleted height line in CSS ;)
I also see few other problems in your code:
<p><center>Contact Stuff Here <p
class="footertext">Copyright 2014</p></center></p>
Tag p can contain only inline elements like span or img, so there shouldn't be nested p tags.
<p class="footertext">here is some more site map info<br>
Tag p should always has be closed, so you should add </p> after <br>
<center> tag is deprecated. Better practise is to use CSS for that - for example text-align:center for inline elements or margin:auto for blocks.
I'm working on an app that has a group of icons in the footer of a column. Currently, the icons are left-justified. However, I'd like to make them centered. To demonstrate, I have a fiddle that can be found here. The HTML looks like the following:
<div class="ui full-height grid">
<div class="full-height row">
<div id="navDiv" class="four wide full-height column" style="background-color:navy; color:white;">
<div id="nav-tab-items" class="row">
<div class="nav-tab-frame column">
<div class="ui active tab nav-tab-content" data-tab="home">
First Tab
</div>
<div class="ui tab nav-tab-content" data-tab="info">
Second Tab
</div>
<div class="ui tab nav-tab-content" data-tab="third">
Third Tab
</div>
</div>
</div>
<div id="nav-tab-control" class="bottom aligned row">
<div class="ui pointing secondary menu drawer" style="margin-bottom:0rem;">
<a class="active red item" data-tab="home">tab 1</a>
<a class="blue item" data-tab="info">tab 2</a>
<a class="green item" data-tab="third">tab 3</a>
</div>
</div>
</div>
<div class="eight wide full-height column">
[Content Goes Here]
</div>
</div>
</div>
There are two problems with nav-tab-control. First, as soon as I set 'bottom:0' for the , the nav-tab-control style, the row takes up the entire width of the page. I can't repro that error in the fiddle. But I have no idea what would even cause that. Second, and I believe this is related to the first problem, is that I can't figure out how to center the icons within the width of the navDiv.
I sincerely appreciate any insights that someone can provide.
This code centers the buttons at the bottom (I couldn't think if what else you would mean by 'icons').
You say #nav-tab-control is claiming the full width of the screen. That is actually needed to make it possible to center its contents. So because it didn't do it automatically, I've set the width to 100% in the css:
#nav-tab-control {
position:absolute;
bottom:0;
left: 0;
width: 100%;
text-align: center;
}
.ui.pointing.secondary.menu.drawer { display: inline-block; }
This makes #nav-tab-control the full width of the page, and centers any text in it.
Then, the container of the icons is displayed as inline-block, so it respects that centering.
http://jsfiddle.net/62eMj/3/
If you don't want to center it in the whole screen, you can also set position: relative to one of the parent elements. For instance to to center them inside the blue bar (also causing them to wrap):
http://jsfiddle.net/62eMj/4/
I found it a bit hard to find out what your actual problem is. I thought I knew but now I', not so sure. I hope these hints will help you solve it.
See here:
http://jsfiddle.net/MLaVb/1/
The caption that is positioned via position:absolute over the thumbnail (position:relative) moves when you hover over the thumbnail.. The only thing defined on :hover is the
transform:scale(1.2);
Any ideas how to fix?
I need two separate divs for the caption, 1 for the bg, 1 for the text (can't use RGBA).
Note that the margin around the image needs to remain. In this example, 5px, but could just as well be 20px or more.
Thanks,
Wesley
this is the working html +css
<a href="https://picasaweb.google.com/Darryl.Wilson1/MyPictures02#5157833312913845474" style="padding:0px;margin:0px" class="thumbnail zoom">
<div class="container" style="padding:0px;margin:0px">
<img src="http://lh6.ggpht.com/-iMWjZc44UuA/R5ROEhrn7OI/AAAAAAAAAV4/3l2mDuaeQ4Q/s160-c/Acura%252520Advanced%252520Sports%252520Car%252520Concept%25252002.jpg" style="width: 160px;">
<div class="title_grid inside" style="width: 160px;margin:0px;position:absolute;left:0px ">
</div>
<div class="title_grid inside_text" style="width: 160px;">
<span> Acura Advanced</span>
</div>
</div>
</a>
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.