I have this code:
<div style="float: left">
<div style="width: 150px; background-color: red">logo</div>
<h1 style="width: 250px; background-color: green" >long slogan</h1>
</div>
<div>fb like and g+ buttons</div>
Is there any way to place foobar3 above the green div???
NOTE: I want to use this code order (logo > long slogan > social), because I want to show the slogan below the logo in mobiles and tablets, that is my target, so maybe you can tell me any other work around.
If you want that order logo > long slogan > social, then here is code
<div style="float: left">
<div style="width: 150px; background-color: red">logo</div>
<h1 style="width: 250px; background-color: green" >long slogan</h1>
</div>
<div style="clear:both"></div>
<div>fb like and g+ buttons</div>
Related
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
This is the code I've pulled. I don't know how to push the footer widget down to the bottom of the page. The footer sits at the bottom for other pages because there isn't a lot of content but on one page, it sits in the middle of the content.
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="container">
<div class="row">
<div id="footer-widget-area" class="row">
<div class="footer-widgets-1 col-md-12"></div>
</div>
<aside id="black-studio-tinymce-4" class="widget_black_studio_tinymce widget well">
<div class="textwidget">
<h6 style="text-align: center;">
<span style="color: #000000;">© 2016 xxxx LLC | Location| Phone Number | email#gmail.com</span>
<br>
<em>
<span style="color: #000000;"> All photos, designs, layouts, and content on this website, including blog, are under copyright, unless otherwise noted. If you would like to borrow an image and/or content, kindly request for permission.</span>
</em>
</h6>
</div>
</aside>
<div class="col-md-9">
<div class="site-info"></div>
<div class="attribution">
<span class="attribution-theme-mods">
Special Thanks
</span>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</footer>
</div>
<div style="display:none"></div>
The attribution, display none is for WordPress attribution that I don't want to display.
Here's a working version:
http://jsbin.com/qepuxay/edit?html,css,output
Critical CSS:
html {
height: 100%;
}
body {
min-height: 100%;
padding-bottom: 140px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 140px;
border-top: 1px solid red;
}
Note: this requires that the height of the footer is 'known' - I have set it to 140px, with 140px added as padding to body. I have also added a red border-top for visual purposes.
Sorry for the title, couldn't think about a better description for now.
Situation: Mouse over the progress bar to show a title. The small area (in my real case it is bigger) from the gray that mix with the green did not show the title. Looks like the number is a layer ahead of the progress bar.
http://jsfiddle.net/w6fpszkx/
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading text-center">Title</div>
<div class="panel-body" style="padding: 0px 15px 15px 15px;">
<p class="text-center" style="font-size: 110px; line-height: 1;">82<span style="font-size: 23px;">%</span></p>
<div class="progress">
<div title="" data-html="true" class="progress-bar progress-bar-success" style="width: 82%" data-original-title="ON TIME<br><span class='label label-success' style='display: inline-block; width: 100%; margin-bottom: 5px;'>9 (82%)</span>">
<span>9 (82%)</span>
</div>
<div title="" data-html="true" class="progress-bar progress-bar-danger" style="width: 18%" data-original-title="EXPIRED<br><span class='label label-danger' style='display: inline-block; width: 100%; margin-bottom: 5px;'>2 (18%)</span>">
<span>2 (18%)</span>
</div>
</div>
</div>
</div>
</div>
Is it possible to reduce the top and bottom gray area from the "82" number to the top and bottom limits of the numbert itself? Thanks.
Yes. you have to adjust better the line-height of your element.
.text-center {
line-height: 0.75;
}
(and I removed the value "1" you added as style online in the html)
JSFIDDLE
Edited: But to be sure your tooltip will always show just add:
.progress {
position:relative;
z-index:1;
}
so your bar will always be OVER the number:
updated FIDDLE
I'm trying to create a 2 column layout with an image to the left and text to the right in wordpress. This needs to be a max of 600px width, the images will all be a fixed size of 250px wide and 142px high, and I will have image/text repeated below, as in this site http://housemusicpodcasts.co.uk/latest-podcasts/
All my attempts have led to the text just appearing below the images. I'd like to just be able to html/css without the need to change core files.
EDIT: Ok I have this code, but it does not align correctly, any ideas what I need to change?
<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>
</div>
<p>TEXT HERE</p>
<p style="text-align:right;">Read More....</p>
</div>
</div>
<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="TEST" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>
</div>
<p style="text-align: left;">TEXT HERE</p>
<p style="text-align: right;">Read More....</p>
</div>
</div>
CSS
.pod p {
margin: 0px;
padding: 0px;
float: left;
clear: right;
}
.singleblock {
float:left;
clear:left;
margin-bottom: 10px;
}
Any guidance will be much appreciated.
Gary
for each couple of image/text, put them in a div. put a class on this div, and on use this CSS
.yourdive img{
float : left;
}
I have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using tags, and the center image is displayed as a 'background-image" with my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.
What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
<div style="float:left; width:100%">
<div style="width: 50px;float:left;"><img src="myleftimage" /></div>
<div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
<div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
try
<div style="width:100%;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
or
<div style="width:100%; border:2px solid #dadada;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>
</div>
This will do what you want. Fixed sides with 50px-width, and the content fills the remaining area.
<div style="width:100%;">
<div style="width: 50px; float: left;">Left Side</div>
<div style="width: 50px; float: right;">Right Side</div>
<div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
Or, if you know the width of the two "side" images and don't want to deal with floats:
<div class="container">
<div class="left-panel"><img src="myleftimage" /></div>
<div class="center-panel">Content goes here...</div>
<div class="right-panel"><img src="myrightimage" /></div>
</div>
CSS:
.container {
position:relative;
padding-left:50px;
padding-right:50px;
}
.container .left-panel {
width: 50px;
position:absolute;
left:0px;
top:0px;
}
.container .right-panel {
width: 50px;
position:absolute;
right:0px;
top:0px;
}
.container .center-panel {
background: url('mymiddleimage');
}
Notes:
Position:relative on the parent div is used to make absolutely positioned children position themselves relative to that node.
making a dynamycal width with mobile devices support
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html