I would create something like this jsFiddle.
I have a container, with a 1024px width. Then I would create in the middle of the page a fullwidth-div, with for example an image. In the example the yellow div should cover the blue one (that simulate my screen width ).
PS: I simplify the container, but think inside a wordpress wrapper where .red is the post and .yellow is the fullwidth-image. (Like HERE for example. I know that's made using the pages and not the posts )
HTML
<div class="container">
<div class="red">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
<div class="yellow">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<div class="lime">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</div>
</div>
</div>
CSS:
.container{ background: blue; width: 400px;}
.red {background:red; width: 200px; margin: 0 auto;}
.yellow {background:yellow; width: 300px;}
.lime {background:lime; width: 200px; margin: 0 auto;}
You should close .red before you open .yellow otherwise .red will be the parent of .yellow and if you put width:100%; on .yellow it will take the width:200px; from .red instead of .container.
Here is a JSFiddle.
Try out thinking different changing css parameter instead of using background-color. I have tested it with :box-shadow parameter:
.toggle {
box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
}
Take a look at live example: fullwidth blue section here: http://kreditka.testovi-site.pw
Regards,
Max
Related
I am creating a component like the stacked cards, I am having all cards positioning as absolute but facing issues with z-index property, The cards doesn't seem to change with respect to z-index.
<div style="display:flex;justify-content:center;position:relative">
<div style="height:180px;width:280px;background-color:green;position:absolute;top:70px;z-index:100;box-shadow: 0px 0px 12px 0px black"/>
<div style="height:180px;width:260px;background-color:blue;position:absolute;top:-20px;z-index:99;left:10px;box-shadow: 0px 0px 2px 0px black"/>
<div style="height:180px;width:240px;background-color:red;position:absolute;top:-20px;z-index:98;left:10px;box-shadow: 0px 0px 2px 0px black"/>
<div style="height:180px;width:220px;background-color:yellow;position:absolute;top:-20px;z-index:97;left:10px;box-shadow: 0px 0px 2px 0px black"/>
</div>
The div closure is wrong, but so is the positioning. Take out the left and make the top go up by the number of pixels that you want overlapped.
<div style="display:flex;justify-content:center;position:relative">
<div style="height:180px;width:280px;background-color:green;position:absolute;top:70px;z-index:100;box-shadow: 0px 0px 12px 0px black"></div>
<div style="height:180px;width:260px;background-color:blue;position:absolute;top:65px;z-index:99;box-shadow: 0px 0px 2px 0px black"></div>
<div style="height:180px;width:240px;background-color:red;position:absolute;top:60px;z-index:98;box-shadow: 0px 0px 2px 0px black"></div>
<div style="height:180px;width:220px;background-color:yellow;position:absolute;top:55px;z-index:97;box-shadow: 0px 0px 2px 0px black"></div>
</div>
I have a small challenge:
how to add shadow to each letter in the header?
I tried this but add shadow to the whole div not to separate letter...
shall i wrap each letter in a span or what is the solution ?
h2 {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
You need to use text-shadow instead of box-shadow
Edit:
text-shadow doesn't have a spread value
Using your example it would be:
h2 {
-webkit-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
-moz-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
}
As an important note to the answer of Ricardo Ribeiro i'd add that in this way compatibility is "limited" in IE to the version 10+
For versions < 10 till 5.5 a proprietary filter can be used as fallback:
h2 {
filter:progid:DXImageTransform.Microsoft.Shadow(color=#xxxxxx,direction=[int],strength=[int])
}
more info here
I've finally been able to get my site back up and finish building it, yet I am not satisfied with the front end.
My current goal is have the the mobile display with 2 items in 2 rows.
But my issue is when I use the Chrome mobile view and my personal phone, it still copies the attributes from "fbox".
HTML:
<div id="row"1><div class="fbox mfbox" id="breast">test </div>
<div class="fbox mfbox" id="facial">test </div></div>
<div id="row2"><div class="fbox mfbox" id="body"> test</div>
<div class="fbox mfbox" id="surgery">test </div></div>
CSS:
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
.row1{
clear:both;
}
.row2{
clear:both;
}
}
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
I've added it to JSfiddle, but it does not seem to produce the results my site does.
My site: Site Removed.
Write media query under the .fbox like below
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#row1, #row2 {
clear: none;
}
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
#row1{
clear:both;
}
#row2{
clear:both;
}
}
See fiddle
In your case first .mfbox is applied good but after .mfbox there is another css .fbox so the css is replaced from .mfbox to .fbox, in that case you should apply midea query at the bottom.
Remove clear when outside of the media query,
and use # instead of . when using id
i.e. #row1 instead of .row1
You said you want two items in a row. But your css
.mfbox{
...
width:100%;
height:200px;
display:block;
}
means only one item at a row with 100% width & height of 200px.
Also in your code you are getting issues because, you had two class, and in css you defined styling for both class in the order .mfbox & .fbox. So while applying css styling obviously it will take later defined style only.
However, if you want to apply different css for mobile view and different for desktop, its not necessary to use two classes. You can handle this with only one class & in css can handle with #media.
For example:
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#media (max-width:767px){
.fbox{
width:100%;
height:200px;
display:block
}
}
I'm using a 1120px css responsive framework responsive or it can act as a fixed grid whenever I need it.
I have a div inside the 1120px container div on which I want to apply a full width background color.
The background color of the div's is of course only inside the container div and I want to make it fill the full width of the body element.
Now the problem is that the div is generated automatically by a shortcode so I can not create an outer div and set it to 100% width.
Here is the markup from the shortcode:
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>
</div>
</div>
and this css :
.toggle{ margin-bottom: 5px;
clear: both; float: left;
position: relative;
width: 100%;
}
.toggle .toggle_title {
position: relative;
font-size: 112.5%;
font-weight: 700;
padding-bottom: 15px;
padding-left: 25px;
text-decoration: none;
}
and here is a FIDDLE
Now, the problem is that this markup is under a container div which has 1120px width.
I was thinking to add on .toggle .toggle_title position:absolute; and set a min- width of 1480px for example but then everything will break.
I'm sure that is a better approach to this kind of issue.
Can anyone give me some tips on how to make this work?
Thank you!
Here's a really ugly way to do this. and I'm posting this with an expectation of someone downvoting this... but it works.
Here's a fiddle for it http://jsfiddle.net/5mn22/8/
Add this to your CSS:
.toggle_title, .toggle_content {
position:relative;
z-index:2;
}
.toggle:before {
content:"";
width:4000px;
position:absolute;
height:100%;
background-color:red;
left:-50%;
z-index:1
}
Basically, just adding a null content before the div with a width double the size of expected screen resolution and position it to the left 50% to make sure it stretches the entire distance.
What do you think?
Try out thinking different changing css parameter instead of using background-color. I have tested it with :box-shadow parametr:
.toggle {
box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
}
Take a look at live example (blue row)^http://kreditka.testovi-site.pw
Regards,
Max
I have a very peculiar problem concerning formatted input buttons.
On my first page, I created a css rule named "button" for formatting buttons that stand alone in one row. it works perfectly, and the button appears as shown below
the css for this button is below
.button {
width: 100%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
In html, it looks like this:
<a href="dashboard.html">
<input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>
The problem is, I've copied this rule and altered it slightly in a second page for buttons which are parallel, and it doesn't format the buttons. strangely enough, it appears right in dreamweaver
but in any browser, it loses it's formatting
Here is the css for the parallel buttons
.2buttons {
width: 40%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
and here is the html
<a href="report.html">
<input class="2buttons" type="button" value="OK"/>
</a>
strangely enough, even if you apply the first css rule, which works, to these buttons, they still remain unformatted.
There two thing in your code.
first
Never start class &ID name with numerical number.
Write like this .buttons2 instead of this .2buttons.
& Second
Write like this
border:none !important;
Instead of this:
border:none; !important
border:none; !important should be border:none !important;
And change the class name to .twoButtons (or something else) instead of .2buttons as class names can't start with numbers...
Do NOT start a class name with a number! This is only supported in Internet Explorer.
See
http://www.w3schools.com/css/css_id_class.asp
Your problem in that the name of the class starts with number. You should change that.