Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 8 years ago.
Improve this question
When viewing the website on my iPhone (or when I resize the browser), the text in the About Me section of the footer partially disappears on the right hand side of the window.
When I remove the padding from #footer .wrap, none of the text disappears from the browser window. At it's current value, the padding is 10px 15px.
Ideally, I'd like to keep some sort of padding instead of setting it to zero (or removing it), while obviously having all of the text appear in the browser.
Website: http://www.josephruscitti.com/clients/vickieats/
Screenshot: http://imageshack.us/a/img534/3144/xhx0.jpg
Remove width: 100%; from here on the mobile media:
#footer-widgets {
background-color: #F5F5F5;
border-top: 1px solid #DDDDDD;
clear: both;
font-size: 14px;
margin: 0 auto;
overflow: hidden;
width: 100%;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
so I am trying to make my banner expand across the page,
I have already tried width: 100% but it has a gap (about 5px width) on either side, any ideas why it's doing this?
CSS
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
It is your browser default margins and padding, do this in your css:
body {
margin: 0;
padding: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
im trying to centering the ul menu in center but isnt working, the menu is sticky fixed menu, hope someone can find a solution in centeriong my top menu in the page.
Here is the link do take look
http://jsfiddle.net/pMBfD/
or
http://maurobonucci.com/demo/
Try this seems to work on jsfiddle.
ul#menu {
float: none;
list-style: none;
margin: 0 auto;
Update using CodePen instead of jsfiddle
http://codepen.io/anon/pen/DxnjH/
I'm not entirely sure what you're looking for, but here's my suggestion:
I took a look at some of your css code...
ul#menu {
float: left;
list-style: none;
margin: 0px 0px 0 0px;
width:700px;
}
To center any div nowadays, you should use something like margin: 0 auto 0 auto;, giving you a centered element/div with a top and bottom margin of 0. Apply this to the menu and it should come out centered. Hope I could help!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
i own a blog url http://www.rayaaskart.com/ . I placed a code for social sharing button . you can see it is aligned to left side of the window on my site. i want to align near to blog posts . how i can do it by modifying the css . i included the style code along with this message.
<style>
.float_sharer
{
text-align:center;
width:70px;
border-radius: 10px;
background-color:white;
padding : 10px;
position: fixed;
box-shadow:0 0 10px #999 inset;
top: 200px;
left: 0px;
z-index: 10;
}
</style>
change left: 0px; to left: 20px;...20px is an example ...change it to fit your need
Omit the left: 0px; so it's positioned in it's original position and instead add margin-left:-100px; to your style to move it 100px to the left (70px width + 20px padding + 10px margin = 100px).
To nicely align it with your maincontent, also omit the top declaration and replace it with margin-top:8px; (the same margin you give to your #main-wrapper).
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I was wondering if anyone could help me out fix my the top portion of my webpage to stay.
I have tried using the position:fixed attribute, but this hinders everything as then my content overlaps the fixed divs.
My website is here:
www.crookedcartoon.co.uk/print.html
I would like everything above the navbar, navbar included to stay glued to the top of the page and the content to scroll under it.
I realise this may mean i'll have to change the majority of my images to jpg instead of png. However, i was wondering if there was anyway around this? As in create a false line that the content scrolls under, then disappears, rather than reaching the top of the page, by where you will see it through the transparent parts of the PNG images. I don't want to use an iframe, really, unless this is the only way.
Thanks!
An iframe is certainly not the right choice here. Put a div around the stuff you want to have on top, put position: fixed on it and position it to the top left corner.
<div class="ontop">
<div id="top"></div>
<div id="logo"></div>
<div id="contact"></div>
<div id="navbar"></div>
</div>
After that, add some margin-top on #content-holder that equals to the height of .ontop. This is necessary because it is taken out of the document flow (because of position: fixed) and content will go under it.
If you also add background-color: white to .ontop, your transparency problems will be gone.
Tried to replicate your setup, here is a working demo.
you may try this
please update below css as i have updated the image by making the portion at the bottom transparent,making the top background white. [1 - DOWNLOAD IMAGE AND CHECK IT]
#ontop {
background: inherit;
height: auto;
margin-top: -10px;
position: fixed;
z-index: 10;
}
#contact {
background: none repeat scroll 0 0 white;
height: 45px;
margin-bottom: 1px;
margin-left: -5px;
margin-top: -8px;
position: relative;
vertical-align: top;
width: 1127px;
}
#logo {
height: 62px;
margin-left: -10px;
position: relative;
width: 1127px;
z-index: 1111;
}
]
1
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
The below css coding is used in my page. But in chrome it displays the image fine. but in firefox it breaks. I dont know why it shows like that. If anybody know the solution for this please help me. Thanks in advance.
.vote
{
position:absolute;
margin: 53px 3px 0 115px;
}
http://domian.com/mysite/pollpage.php?id=2&mview=72
This is my website page. The vote image alignment is correct in chrome but not in firefox
add position relative
.contentbox
{
position: relative;
}
and remove margin ,
add bottom and right
.vote {
position: absolute;
bottom: 0;
right: 45px;
}
...
Now define your main div #polling .pollpagewidth div .contentbox position relative and give to img tag position absolute and define right or bottom value according to your design
Hi now add this css in your style sheet and fixed this problem
#polling .pollpagewidth div .contentbox{
position:relative;
}
.contentbox > img {
bottom: 16px;
margin: 0;
padding: 0;
position: absolute;
right: 43px;
}