In the attached image, i want to remove the space of the left of content aria, same space is there on right side of page, remaining parts of interface have spanned over the whole width but it is not spanning over the whole width.
How can i span it on the whole width without disturbing the upper parts of interface?
I'm having the following css file.
#logo {
left:13px;
top:-3px;
position:absolute;
z-index:2;
}
#heading {
height: 150px;
right: 0px;
left: 0px;
top: 0px;
margin-bottom: 5px;
background: #e8e8e8;
position:absolute;
z-index:0;
}
#upperMenu{
position:absolute;
height: 25px;
padding-top:2px;
right: 0px;
left: 0px;
top: 105px;
background: #e38217;
position:absolute;
z-index:1;
}
#content {
right: 0px;
left: 0px;
border: thin solid lightGray;
background: #F0F0F0;
margin-top:150px;
height:700px;
padding-bottom: 20px;
}
It's hard to give accurate advice when you've only shown your CSS and not your HTML but I'd say straight off that you're using too much absolute positioning. You should be trying to work with the normal document flow wherever possible using margins and padding to create space or move elements away from each other. Sometimes you'll also need floats, and usually, absolute positioning will be the final resort.
You should also validate your CSS because you have a few errors like specifying right and left values for elements that aren't either position relative or absolute.
You should also be careful specifying fixed heights and instead let the content of an element dictate how high it or its parent should be. If you specify a fixed height and the content is too long, it'll either spill out of the box or be hidden if you've set overflow:hidden on the parent.
Related
I am trying to make the size column in this next to the color column. The problem is that I can only edit the CSS, and I am using the Woocomerce plugin for WordPress. I only want the two columns to be next to each other, but with absolute or relative position + some adjustments, they work for one product, but not for the others. That is because the color column is not always the same length, which changes the starting position of the size column.
This is what I managed to do. (the code that affects the position starts after /***/
/*this one involves the whole banner with the logo and the phone numbers (but it is ignored by the children for aesthetic purposes)*/
#masthead {
background-color: rgba(140,210,190, 0.2);
height: 210px;
}
/*this one is the logo AeryUniforms*/
.custom-logo-link {
}
/*this one is for the bar with the contact and the address*/
.right-head{
border-radius: 5px;
background-color: rgba(250,250,250, 10.0) !important;
}
/*this one is the menu with the home button*/
#main-nav {
background: #323a45;
}
/*these two are for the arrows in the carrousel*/
.fa-angle-left{
position:relative;
top: -30px;
right: 4px;
}
.fa-angle-right{
position:relative;
top: -10px;
right: 2px;
}
/*this one handles the width of the color, size, and height drop and buttons*/
.variation-selector,
.variation-select-color,
.swatch-item-wrapper{
width: 50%;
}
/***/
/*adjust the position of the label for the color*/
label[for="pa_color"]{
position:relative;
top: -23px;
right: -52px;
}
/*adjust the position of the button for the size*/
div[data-attribute_name~="attribute_pa_size"]{
float:right;
position:relative;
top: -377px;
right: 86px;
}
/*adjust the position of the drop-item menu for the size*/
select[id="pa_size"]{
position:relative;
top: -377px;
right: -140px;
}
/*adjust the position of the label for the size*/
label[for="pa_size"]{
position:relative;
top: -400px;
right: -190px;
}
I was looking for a way to make the tr element for the size aligned with the one of color, like a position x + 3px from element 1. My last resort was to do the position relative to the top right corner of the page, but I wasn't sure how, or if the elements would move as I scroll through the page.
So it is hard to suggest a solid solution without knowing the HTML. CSS only gets us part of the way there. What I would do if at all possible based on the structure is if each option is contained in its own box and the 3 boxes are in one parent. I would display: flex that parent which will put them all side by side. Then adjust as needed from there. If you could add the html just for those 3 boxes and that section it would help.
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
I have been trying to edit my header in Joomla. I have added following class to my template to round the corners and add the background:
.holola {
background: #FFF!important;
border-top-left-radius: 15px;
border-top-right-radius: 15px; }
How I can bring the logo up and make it look offside the header, like in attached image. I know how to make this happen using image in header, but I want to make it pure CSS to make the page look better in mobile version.
I have tried to add padding but I think it should be more complicated code to use?
Remove the padding you've added.
Then add some top margin to the .wrapper to push the main content down a bit.
body.boxed .wrapper {
margin: 60px auto 0 auto
}
And now add margin-top to the logo to move it up.
#header_logo {
margin-top: -60px
}
Try adding these also
#zo2-header{
margin-top: 50px;
}
#header_logo .logo_normal{
position: absolute;
top: -103px;
}
Remove your padding: 60px 0; from #zo2-header and replace with margin-top: 60px;.
Add
#header_logo {
position: relative;
top: -60px;
}
You would want to use position relative. See this jsfiddle for a simple example that should work for you situation.
#img {
background-color:red;
height: 80px;
width: 80px;
position:relative;
top: -40px;
}
Basically the important parts here is the combination of position: relative and top: -40px. This says position the element relative to the parent element and "anchor" its top -40 pixels from where it would normally be (top aligned with the header's top)
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
i have a div with overflow-y: hidden; and a have a pseudo element to the right of the buttons that i want to position outside the div but it will not work. here is the fiddle - http://jsfiddle.net/PAdSd/1/.
But if i give the div no overflow it will sit out of the div fine. Here is that fiddle - http://jsfiddle.net/PAdSd/2/.
Any help would be wonderful
Remove position: relative from .nav. You can see the results in this jsfiddle.
A similar problem had me banging my head against the wall for days. Trial and error and pure chance produced the solution. Not sure about cross browser compatibility, but it works in chrome and firefox (as long as you prefix your css3 properties with -moz).
Here's another way of solving this problem (especially useful when you can't just remove position:relative because of say, using height:100%; on the pseudo element):
To make the content visible, add padding to the bottom, say 10px;
Then to remove the paddings effect for other elements use margin-bottom:-10px;
So:
.nav{
background: transparent;
height: auto;
overflow-y: hidden;
position: relative;
/*new stuff*/
padding-bottom:10px;
margin-bottom:-10px;
}
It's hidden because that is what you have told it to do.
http://jsfiddle.net/PAdSd/3/
If you don't want it hidden, but still want overflow hidden then you will need to reposition it higher. .nav:after will put content at the end, but inside of the nav tag.
You can position it higher by adjusting the top css value.
.nav:after{
content: "";
border-radius: 5px;
background: #000;
width: 10px;
height: 10px;
position: absolute;
left: 500px;
margin-left: 1px;
top: 10px;
box-shadow: -5px 5px 0px #8f0222;
z-index: 20;
}
Or you might want to use body:after instead, because it doesn't sound like you actually want it inside the nav bar.