I want to create a small white div/background at the top of this site.
http://bit.ly/ZgawU6
The front page shows it correctly, however I've made this with a background-image. When the same background image is used on a page like this: it's at 50% or something, and top:0 won't work.
Can anyone point me in the right direction?
Thanks!
http://bit.ly/1311wSB
What I did was wrap the div with the class of navigation container with another wrapper div, lets call it outer-navigation-wrapper then applied this css.
HTML:
<div class="outer-navigation-wrapper">
<div class="container navigation-container">
...
</div> <!-- end navigation-container -->
</div> <!-- end outer-navigation-wrapper -->
CSS:
.outer-navigation-wrapper {
background: #fff;
height: 60px;
}
Related
I'm having troubles with this - The images are not displaying
<div class="carousel-inner">
#foreach ($model->pictures as $picture)
<div class="fill"
style="background-image:url({{ URL::asset($picture->path) }});">
</div>
<!-- {{ HTML::image($picture->path)}} -->
#endforeach
</div>
if I go to the view source the image is alright, actually I pasted the result in the url and works. By the way in the example i have a commented line that works, but I need the image as a background in a div and not actually as an html tag.
What could it be?
the fill class on css:
.fill {
width:100%;
height:100%;
background-position: center;
background-size: cover;
}
It seems that the class "fill" doesn't have the height nor the width. Since you are defining a background for an element that does not have any size, the element itself (ie: the div) is now being showed.
You can resolve this by defining the width and height, like this:
<div class="fill"
style="background:url({{ URL::asset($picture->path) }}); no-repeat;
background-size:269px 95px;height:95px;width:269px">
</div>
Try this:
<div style="height:100px;width:100px;background-image:url('{{ asset('http://www.example.com/images/image.png') }}'); border-radius: 5px;position:relative">
Instead of using:
URL::asset($picture->path
You can use the absolute path to the image.
For example:
http://www.example.com/images/image.png
Also, try using width in px instead of in %
Note: It is better to avoid inline styling but since you are already using it for the background-image, I would just go ahead!
I am having trouble achieving the following. I would like to remove the white background color above my nav bar on the following page. http://www.balfourautobody.com/
This way the logo will sit on the brick instead of on white background.
I have been playing around with it but can not seem to figure it out.
I understand that is probably a pretty simple question but I am stuck.
Any help would be much appreciated
The white background belongs to the wrapper element (#wrapper). You would also have to remove the box shadow.
Be aware that doing this will remove your content background as well so you'll have to add another in.
Move your div with id="logo" before div with id="wrapper":
<body>
<div id="logo">
...
</div>
<div id="wrapper">
...
</div>
...
</body>
To remove white space above navbar, add to styles something like this:
#contact-details {
margin: 10px;
}
#header {
min-height: 10px;
}
I'm having an issue with an expanding div tag that is nested within another div tag. In IE the expanding div tag expands outside the outer div tag when needed. However, in Chrome, when the inner div tag expands, it causes the outer div tag to get scroll bars. I would like the behavior to be the same as in IE - no scroll bars appear and the content overlaps the body content of the page (after all it is just the shopping cart widget).
Here is the code in my html page.
<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
<div id="mastheadcontent">
<div id="googlecart-widget" style="float:right;"></div>
</div>
</div><!-- End Masthead -->
Here is my CSS:
#mastheadcontainer {
width: 100%;
margin: 0 auto;
background-color: #dcb;
border-bottom:10px solid #0066CC;
/*margin-bottom:20px;*/}
#masthead {
text-align: right;
width: 960px;
margin: 0 auto;
overflow: auto;}
#mastheadcontent{
width:956px;
height:122px;
margin:0 auto;
/*background-image:url('../images/bk-masthead.jpg');*/
/*background-repeat:no-repeat;*/
background-color:#dcb;}
Any recommendations so that the inner div tag expands similar to the behavior in IE when viewed in chrome?
Thanks
Mike
I assume your are talking about vertical scrolling and that the content inside your #mastheadcontent id is making a scroll bar appear when it exceeds 122 pixels.
I am not sure exactly what you want the end result will look like but here is what I suggest depending on what you are looking for:
Remove the height of the container so that the div will expand to fit the content inside of it. Note that since you are using a floated inside the container you will have to clear the container using a number of methods, one of them is using the property "overflow: auto;" on the #mastheadcontent. If you are not familiar with clearing floats I suggest you look at the multitude of guides on the web to help you understand the concept.
Or you want the content to expand past the boundaries but not expand the container itself, in that case you might want to use the property "overflow: visible;".
In any case you might want to play with the overflow property to get a solution to your problem, there is plenty of information on the web that should clear things up for you.
Hope this helps.
I answered my own question. Here is the current div structure of my site:
<div id="main>
<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
<div id="mastheadcontent">
<div id="googlecart-widget" style="float:right;"></div>
</div>
</div><!-- End Masthead -->
<div id="bodydiv">
</div><!-- End bodydiv -->
</div><!-- End main -->
To get the googlecart-widget to expand over the top of the content in the bodydiv element in Chrome, I had to add overflow:visible to all div elements in the mastheadcontainer and to the mastheadcontainer element. My new HTML div structure looks like this:
<div id="main>
<div id="mastheadcontainer" style="overflow:visible;"><!-- Begin mastheadontainer -->
<div id="masthead" style="overflow:visible;"><!-- Begin Masthead -->
<div id="mastheadcontent" style="overflow:visible;">
<div id="googlecart-widget" style="float:right; overflow:visible;"></div>
</div>
</div><!-- End Masthead -->
<div id="bodydiv">
</div><!-- End bodydiv -->
</div><!-- End main -->
This might be a bit of overkill setting the overflow property for all elements, but it worked.
I am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0
HTML: (note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="sticky">
<div id="s_content">
Hello
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
jsFiddle: http://jsfiddle.net/ZqaDe/
Preview: http://jsfiddle.net/ZqaDe/show
EDIT:
I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.
EDIT 2:
I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/
You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.
So your JQuery string would become:
$(this).parent().parent().appendTo("#footer")
.css('position','relative')
.css('float','left')
.css('height','45')
.css('top','0')
.css('left','0')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/2/
Edit
Or better still, change the position to static, that way you do not need to reset the top and left values:
$(this).parent().parent().appendTo("#footer")
.css('position','static')
.css('float','left')
.css('height','45')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/3/
Edit 2
Or even better, just append classes that do not overwrite your inline CSS:
.tabMe {
float: left;
height: 45px;
position: static;
}
.tabMe #s_head{
border: 0;
}
.tabMe #s_content{
display: none;
}
And your JQuery to show / hide could become:
$('#s_head button').on('click', function(){
var check = $(this).parent().parent();
if( !check.hasClass("tabMe"))
check.appendTo("#footer").addClass("tabMe")
else
check.appendTo("body").removeClass("tabMe")
});
JSFiddle: http://jsfiddle.net/u2nda/4/
You just need to move the second div to the right: #s7243 { left: 200px; }. If you had a third div, you'd need to move it over even more: #third-one { left: 400px; }.
I would place the divs in a main container that had my position absolute and then float your blocks.
Example http://jsfiddle.net/ZqaDe/3/
I think that best option would be to wrap your "sticky" divs. See my demo on jsfiddle
<div class="sticky">
<div id="s6234" class="left">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="left">
<div id="s_content">
Hello
</div>
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).