I'm trying to add a sub-footer on top of my footer, like so
header+footer(blue)
sub-footer(red)
I used Ryan's sticky-footer method, so my HTML looks like this
<div id="root">
<div id="header">
<div class="wrapper">
<h1 class='logo'>Logo</h1>
</div>
</div>
<div id="content"></div>
<div id="root-footer"></div>
</div>
<div id="footer">
<div class="wrapper">
<div id='subfooter'>
<div class='subfooter-content'>
<a id="main-nav01" href="javascript: void(0)" target="_self">トップ</a>
<a id="main-nav02" href="javascript: void(0)" target="_self">「世界のKitchenから」の思い</a>
<a id="main-nav03" href="javascript: void(0)" target="_self">タイのお母さんのKitchenから</a>
<a id="main-nav04" href="javascript: void(0)" target="_self">ちいさなKitchenのムービー</a>
</div>
</div>
</div>
</div>
and my CSS for the subfooter like this
#subfooter
position: relative
.subfooter-content
position: absolute
margin-top: -200px
height: 70px
z-index: 10
but it doesn't work on FF, if you see the screen-shots (FF is on the right), the subfooter(red) follows the footer(blue)
edit
I used compass and in the actual design it uses outline top, which i'm having problem with in FF.
here's the jsbin http://jsbin.com/fifeleru/1
If you replace outline:1px solid blue by border-top:1px solid blue; on the .footer the problem is solved.
See here
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;
I almost succeeded making aligned html and css but between writing "today" and "yesterday" the content is not aligned. I want it to look like a table. Now it writes "Today" and just packs the content so that the next row doesn't look adjusted.
.ui.left.floated {
min-width: 80px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<body>
<div id="wrapper"> <div class="ui top attached tabular menu">
<a class="item active" data-tab="first">All</a>
<a class="item" data-tab="second">Company</a>
<a class="item" data-tab="third">Private</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
<div class="ui divided items">
<div style="margin-top:10px!important" class="item">
<div class="ui left floated">
Today
<br>3:28
</div>
<div class="image">
<a href="/vi/5773759738806272.html">
<img src="http://lh3.googleusercontent.com/rVL0kUVl6aHzOiyiz5fWq0YZcwALQdrqn2Vf0DWW0R5OvClZgYj5S4_VoQUajZC54gxlQxgP6NZUr3f9pALqzw3EyQ=s150" title="Get Opencart Development Services from TRS Software Solutions" alt="Get Opencart Development Services from TRS Software Solutions">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5773759738806272.html">
Get Opencart Development Services from TRS Software Solutions </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>TRS Software Solutions is leading ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Lakeland</div>
<div class="ui label">Florida</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
Yesterday
<br>3:44
</div>
<div class="image">
<a href="/vi/5329266862456832.html">
<img src="http://lh3.googleusercontent.com/QQ0YVYpyC5LGhKzpXGlkh-hzQuoYnkDTk4IHtyRKoREVStKOUBrsSH7IdtIZr1F-bXJb38gPRCRtNZuDDROpIOSbO6w=s150" title="Learn jQuery and JavaScript by creating an apple style thumb Slider" alt="Learn jQuery and JavaScript by creating an apple style thumb Slider">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5329266862456832.html">
Learn jQuery and JavaScript by creating an apple style thumb Slider </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Originally started as a programming ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Other city</div>
<div class="ui label">Massachusetts</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
12 July.
<br>0:42
</div>
I tried making a row with cells with semantic-ui but that made things worse. Can you help me?
I want it to look like this (mockup)
Will it work if I make rows and cells?
.ui.left.floated {
min-width: 80px;
}
I am sorry is this what you are after? this will make sure that all the images are aligned? make it 100px as if the date is say.. 31 September (longer wording)
Below is the grid system I use for these sorts of things.
/*________ GRID ________*/
.grid {
margin: 0 auto;
overflow: hidden;
margin-left: -30px;
}
.grid > div {
float: left;
min-height: 1px;
padding-left: 30px;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid .third {
width: 33.33%;
}
.grid .halve {
width: 50%;
}
and so on. then when you get down to smaller sizes eg mobiles.
#media (max-width: 740px) {
.grid .third {
width: 100%;
}
}
the anchor tag in my carousel is showing dead link. i.e. cannot hover over it. everything else works fine. but the link is not working inside the div. i have used all the files from bootstrap and have not made any changes to the scripts.
HTML:
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('images/slide1.jpg'); background-size:cover;"></div>
<div class="carousel-caption">
<h1>Caption 1</h1>
<p></p>
Read More »
<br/>
<div class="tech">
<img src="images/tech.png" />
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('images/slide2.jpg'); background-size:cover;"></div>
<div class="carousel-caption">
<h1>Caption 2</h1>
<p></p>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('images/slide3.jpg'); background-size:cover;"></div>
<div class="carousel-caption">
<h1>Caption 3</h1>
</div>
</div>
</div>
In the comments provided to patel.milanb's answer, the author points to a live example of his problem: http://itechnepal.com/new_site//
The issue: The <ol> containing the carousel indicators overlaps a link, which therefor is not clickable.
Removing bottom: 10px; from .carousel-indicators will solve the issue.
CSS:
.carousel-indicators {
position: absolute;
/*bottom: 10px; <- remove this*/
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
As what i could understand from your question.
link is not working inside DIV
I would say you did not provided any link to your <a> tag
<a href="#" class="read">
replace with:
<a href="http://www.google.com/" class="read">
Update: remove your style from css
.carousel-indicators {
top: 180px;
}
look into bootstrap.css line no: 6590
OR remove bottom: 10px; from class .carousel-indicators Line no: 6523
Hello I'm new to html & css and I have a question. I'm using the following code to set some images with text above and under it as you can see here:
http://jsfiddle.net/thespacebean/xGqDE/
But now i'm trying to re-use that code in another box but the text isn't where it needs to be. here a use another type of box:
css:
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}
html:
<div id="content">
<h2>Kleding</h2>
<div id="navbanner">
<div id="nav2">
<ul>
<li>Baby</li>
<li>Peuter</li>
<li>Kleuter</li>
</ul>
</div>
</div>
<div id="img">
<img src="../images/winkelwagen.jpg">
</div>
<h3>Baby</h3>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
And thats why everything is floating left. Can someone get my images and the text under and above centerd without moving the navbar and Baby title? Thanks in advance !
the fiddle example has
text-align: center;
in the CSS put you don't appear to have this in your CSS so the text will be on the left;
Issue screenshots:
I'm seeing this issue in a few of my divs. Everything looks fine on desktop until I test it out on an iPad. The div does not seem to wrap my content despite my attempt to use < span class="clearfix" ></span> before closing the div.
This is how the code looks like
<div class="span8">
<div class="box datepickerbox">
<span class="daterange_title span3">Activity summary for </span>
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="icon-calendar icon-large"></i> <b class="caret" style="margin-top: 8px"></b>
</div>
<span class="clearfix"></span>
</div>
</div>
All you need to change is
<span class="clearfix"></span>
to
<div class="clearfix"></div>
and Bootstrap clearfix rules do not specify the elemnt to be displayed as a block element and that's what you are missing.