At this page, in a view port of 480px in Chrome, I'd like to set:
#header.boxed .container {
height: auto;
}
instead of:
#header.boxed .container {
height: 186px;
}
When I do this, #header.boxed .container is less tall than I need it.
How do I ensure #header.boxed .container is tall enough to display its contents?
Thanks.
To achieve this you need to make some changes in 480px view-port css
#top .logo {
/*background-image: url("//test.doig.com.au/magnifique/wp-content/uploads/sites/8/2016/10/bg-header.jpg");
background-repeat: no-repeat;*/
clear: both;
padding: 10px 0;
top: 0;
}
#header #searchform {
float: right;
/*position: absolute;
right: 0;
top: 63px;*/
width: 220px;
}
.social_bookmarks {
border: medium none;
display: block;
float: left;
height: 24px;
list-style-position: outside;
list-style-type: none;
/*position: absolute;
right: 231px;*/
top: auto;
}
Hope it will works for you :)
Related
Am trying to make things look like the above image, this is for the fluid layout, but no matter what i do, that phone icon with the number 1-844.....does not move to right next to talk to us. Here is JS fiddle: http://jsfiddle.net/xtf205mk/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.top_nav_icon {
vertical-align: middle;
}
.call_icon_header {
content: url(images/call-us-icon.png);
float: left;
}
.talk_icon_header {
content: url(images/talk-to-us-icon.png);
float: left;
}
.float_right {
float: right;
}
.top_nav_icon {
vertical-align: middle;
}
.top_nav_list1 {
float: left;
}
.top_nav_list1_1 {
font-size: 1em;
width: 100%;
float: right;
}
.top_nav_list1_2 {
font-size: 1em;
width: 100%;
clear: none;
}
.top_nav_list1_2 {
font-size: 1em;
width: 100%;
clear: none;
}
Am using DW CC, but the visual aids is nowhere helping me in moving things to the right.
Can anyone help with this one please, thank you.
I've used pseudo elements to achieve your functionality requirements:
The main point to note that I want you to take from here is my use of display:inline-block;
.phone,
.talk {
position: relative;
display: inline-block;
padding-left: 50px;
height: 20px;
width: 150px;
padding-top: 10px; /*this is to 'vertically align' the text (adjust for your image height)*/
}
.phone:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
background-image: url(http://placekitten.com/g/200/300); /*change to phone icon*/
}
.talk:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
background-image: url(http://placekitten.com/g/200/300); /*change to chat icon*/
}
<div class="phone">phone here</div>
<div class="talk">chat here</div>
As a side note, I would like to point out my personal hate for floating elements, as this really can mess things up in terms of positioning elements.
This is why we have display and positioning css rules for.
I have been searching the web for a while now for an answer to my question. I would like to extend a div background-color beyond the div (and the container div as well) so it reaches the width of the browser. Like so http://vinnusal.is/
The problem with the example above is I'm using a padding/margin fix which creates an annoying scroll to the right. I have tried overflow without any luck.
I know this could be done with a container div that is 100% and nesting divs that are smaller. However I would like to use another way if possible, because this is my first shot at a fluid site with all complications that follow.
Thanks in advance,
Helgi
Here is the HTML markup:
<body>
<div class="gridContainer clearfix"> <!-- Container -->
<div class="gridContainer clearfix header" id="header"> <!--Header begins-->
<img src="pics/hvitt.png" alt="VFI Logo" name="logo" id="logo">
<!-- Menu Horizontal -->
... irrelevant markup for menu...
</div>
<!-- Header ends -->
<div class="gridContainer clearfix submenu" id="submenu"> <!-- Submenu begins -->
<h1><!-- InstanceBeginEditable name="title" -->Articles<!-- InstanceEndEditable --></h1>
And the CSS:
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 88.626%;
padding-left: 1.1869%;
padding-right: 1.1869%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 78.9565%;
max-width: 1232px;
padding-left: 0.5217%;
padding-right: 0.5217%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
}
You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.
#container {
width: 100px;
margin: 0 auto;
background-color: #FFFFCC;
}
.stripe {
background-color:#CCFFFF;
height: 100px;
position: relative;
}
.stripe:before {
content:"";
background-color:#CCFFFF;
position: absolute;
height: 100%;
width: 4000px;
left: -2000px;
z-index: -1;
}
<div id="container">
<div>one</div>
<div class="stripe">two</div>
<div>three</div>
</div>
The accepted answer seems to rely on a fixed height, which I find rare in these days of responsive sites, so building on top of the answer given by Stephen Ostermiller (thanks!) The following code worked for me and surrounds objects of a dynamic height:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
background-color:#000;
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}
Kevin Powell made a Youtube Video about how to do this
https://www.youtube.com/shorts/81pnuZFarRw
All you have to do is add a class to the element and add a couple of lines of CSS! You're basically making a color the whole background and then clipping it based on the element.
CSS
.full-bleed {
box-shadow: 0 0 0 100vmax red;
clip-path: inset(0 -100vmax);
}
HTML
<div class="full-bleed"></div>
Boom, you're done!
Both solutions will cause an overflow.
try this:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
width: 100vw;
margin-left: -50%;
transform: translateX(-50%);
z-index: -1;
}
I have got the following code:
Fiddle
.item {
width: 120px;
padding: 10px;
display: block;
background-color: #CCC;
float: left;
margin: 5px;
position: relative;
}
.item .item-preview {
position: relative;
z-index: 10;
display: block;
}
.item .item-content {
/*display: none;*/
position: absolute;
left: 0px;
top: 37px;
padding: 5%;
z-index: 11;
width: 90%;
background-color: #000;
color: #FFF;
}
I want the div ".item-content", when its displayed, is always on the left side and is as wide as the whole page, how can I do that?
If you remove the position: relative from .item, you will have the desired effect. I also removed the top: 37px; to fix the vertical positioning. If you need to tweak that, use margin-top instead
Fiddle
I'm having a bit of trouble with a div, my website has one wrapper sized height: 100%; this wrapper contains various divs like a header, slider and a content div. The only problem is the content div gets pushed out of the wrapper div for some mysterious reason.
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
You can see a live demo at http://k2stuc.nl/test/
I don't understand your question 100%. But I saw an issue, the navigation behind the slideshow is because your slides, .wrapper .slider-container #slideshow > div has set to position:absolute.
Try setting .slider-container height to a fixed height. Otherwise slides will be above the content.
you are floating things that should not be floated
i.e .header, .main-content,#slideshow - none of these need floats - body should not have height:100%;
give .slide-container a fixed height in pixels not a percentage.. doing the above will fix your problem
Setting height: 100% on the <body> sets its height to 100% of the viewport.
Now, the viewport is as high as the browser window's inner-height; and that changes when you resize the browser itself.
Any direct child of the <body>, set to height: 100% then inherits the viewport's height.
That's part of how a lot of the 'parallax' websites do their thing.
I think the problem comes from the fact the slider div has height:100%
I am working on a website located here:
http://www.freshhealthybistro.com/temp/
I used a 960 grid, and the css for the 960 was taken from the website:
(google 960 gs because I can only post one hyperlink)
I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my CSS:
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../images/fgc_bg.png);
color: #FFFFFF;
font-family: arial,sans-serif;
}
h1 {
font-size: 24px;
color: #FFFFFF;
font-family: arial,sans-serif;
line-height: 50px;
}
#container {
position:absolute;
height: 100%;
left: 50%;
width: 1200px;
margin: 0;
margin-left: -600px;
}
#navigation {
position: float;
float: left;
background-image:url(../images/topbar.png);
width: 960px;
height: 50px;
margin-top: -825px;
margin-left: 120px;
}
#footer {
position: float;
float: left;
background-image:url(../images/topbar.png);
text-align: center;
width: 960px;
height: 50px;
margin-top: -25px;
margin-left: 120px;
}
#clearfooter {
position: float;
float: left;
width: 1200px;
height: 50px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
z-index: 1;
float: left;
position: float;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width:6.333%;
}
.grid_2 {
width:14.667%;
}
.grid_3 {
margin-left: 120px;
margin-top: 30px;
width:23.0%;
}
.grid_4 {
width:31.333%;
}
.grid_5 {
width:39.667%;
}
.grid_6 {
width:48.0%;
}
.grid_7 {
margin-top: 30px;
width:50.666%;
}
.grid_8 {
width:64.667%;
}
.grid_9 {
width:73.0%;
}
.grid_10 {
margin-top: 50px;
margin-left: 120px;
width: 940px;
}
.grid_11 {
width:89.667%;
}
.grid_12 {
width:98.0%;
}
#logo {
position: float;
float: left;
background-image:url(../images/logo.png);
z-index: 100;
width: 266px;
height: 266px;
margin-top: -933px;
margin-left: 472px;
}
#content{
position: relative;
float: left;
background-image:url(../images/contentbg.png);
width: 1200px;
height: 800px;
margin: 150px 0 0 0;
z-index: -20;
}
#background {
position: relative;
float: left;
overflow: auto;
background-color:#bf6b31;
width: 100%;
height: 800px;
padding: 0;
margin: 150px 0 0 0;
z-index: -100;
}
#clearfix {
clear: both;
}
I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:
.featuredbox-wrapper{
display: none;
}
.featuredbox-wrapper,
.featuredbox{
top: 0px;
left: 0px;
width: 940px;
height: 400px;
margin-left:auto;
margin-right:auto;
position: relative;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
z-index: 10;
}
.featuredbox .description{
bottom: 55px;
left: 5px;
font-size: 16pt;
color: #FFF;
width: 500px;
height: 20px;
position: absolute;
font-style:none;
font-weight:normal;
}
.featuredbox-wrapper .navigation{
bottom:15px;
right:15px;
padding:0px;
position:absolute;
z-index: 100;
height: 20px;
width: 100px;
}
.featuredbox-wrapper .navigation ul{
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.featuredbox-wrapper .navigation li{
float: left;
height: 20px;
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #FF0000;
cursor: pointer; cursor: hand;
background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
cursor: pointer; cursor: hand;
}
.featuredbox-wrapper .navigation li.active{
cursor: pointer; cursor: hand;
background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 600px;
z-index: -1;
background: #FFF;
color: #000;
}
Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.
The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.