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
I am trying to move my right sidebar over to the right more. Just like how my left sidebar is. My website is marikastravels.com
Any help would be appreciated!
in your CSS change width to
.yui-t2 .sidebar {
width: 18.5%;
float: right;
}
Also, this will give more room for your center div which you can increase too e.g.
.yui-t2 .main-content {
width: 78.5%;
float: left;
}
I tested the above code in Chrome.
Both works.
<ul class="xoxo" style="float: right;">
<li>...</li>
<li>...</li>
...
</ul>
or
<style type="text/css">
.xoxo{
float:right;
}
</style>
#right-primary {
float: right;
}
I suggest bootstrap for all the other problems
Related
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
I'm creating a page that needs three tables placed horizontally.
I tried two first using:
#table_one {
position: relative;
float: left;
}
#table_two {
position:relative;
display: block;
}
And it worked. I wanted to add another table so I tried:
#table_one {
position: relative;
float: left;
}
#table_two {
position:relative;
display: block;
#table_three {
position:relative;
float: right;
}
But that third table appears below the two tables, placed itself on the right, and it expands itself vertically it even got out of my page background.
Instead of float:left/right use inline layout for the block elements (like display:inline-block or display:table-cell)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
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.
Improve this question
I'm trying to build the layout of my page, so far so good. Until I've placed a image on my header.
When I try styling the image, a white line appear on top of my page. I've place the code on JSFiddle: http://jsfiddle.net/CCZjL/
When I remove the:
#header img {
width:66px;
height:61px;
position:absolute;
top:25px;
}
From my CSS file, the line is no longer there...???
Can anyone explain this to me?
Thank you!
Add margin: 0; and line-height: 65px; to #header h1
like so:
#header h1 {
text-align:center;
font-size:20px;
margin: 0;
line-height: 65px;
}
you can also remove vertical-align: middle; from #header. It's not needed.
white-space is coming from h1.
Browser applies by default styles to elements.
It is better to remove all default styles. Like:
*{
margin:0;
padding:0;
}
Write:
#header h1 {
margin:0;
}
Updated fiddle here.
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
for some flipping reason I can't control the height of width of my image
.pop_image{
top: 10px;
width: 100px;
height: 100px;
position:absolute;
}
the html
<ul class="pop_image"><img src="1.jpg"></ul>
To controll the size of the image, you need to address the image on the CSS:
.pop_image img {
width: 100px;
height:100px;
}
Your CSS will determine the size of the <ul> list, not your image.
Try the following instead:
.pop_image img {
top: 10px;
width: 100px;
height: 100px;
position:absolute;
}
Try to add a display: block; in .pop_image class even if the ul is normaly a block...
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
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.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I'm total CSS/HTML noob.
I would really appreciate if you help me out.
I need to fix my button:
decrease activation field (hover) to the actual size of the button (without shadow)
when I hover cursor over button, how to get rid of 1st image left overs?
THANK YOU!
jsfiddle link:
http://jsfiddle.net/cRqhT/125/
HTML:
<html>
<body>
<div>
<a id="button" href="http://mysite.com"</a>
</div>
</body>
</html>
CSS:
div {
width: 820px;
height: 820px;
background: url('https://gator1174.hostgator.com/~mskparik/facebook/thx.jpg')
}
#button{
display: block;
width: 204px;
height: 116px;
background: url(https://gator1174.hostgator.com/~mskparik/facebook/111.png) no-repeat top left;
position: absolute;
top: 90%;
left:10%;
}
#button:hover {
background: url(https://gator1174.hostgator.com/~mskparik/facebook/222.png) no-repeat top;
}
I simply added a corner bracket where appropriate, and it seems to have fixed both problems. See JSFiddle here.
<html>
<body>
<div>
<a id="button" href="http://mysite.com"></a> <!--Notice extra corner bracket-->
</div>
</body>
</html>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to align "Discuss" "Bury" with the above text in the site but in vain
http://pligg.marsgibson.info/story.php?title=latest-headling-mews-gossip-fun-entertainment-music-gala-and-so-on-for-you-only-for-the-purpose-of-entertaining-you
see the screenshot
I want to align just as in the screenshot
how this can be achieved ?
You need to move that span.linksummaryDiscuss into div with storycontent1 class
or just wrap it in a div and style it (somewhat simliar to div.storycontent1)
.newdiv {
padding: 0 80px;
width: 580px;
}
Option 1
Remove the left padding from .storycontent1:
.storycontent1
{
padding-left:0;
}
Then add the padding to .storycontent
.storycontent
{
padding-left:80px;
}
Option 2
Add this style rule:
#linksummaryDiscuss {
padding-left: 80px;
}
This option will only work if the Discuss span is always there.
move the style: padding: 0 80px; from .storycontent1 selector to .storycontent.