css alignment in a page [closed] - 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.

Related

Align button horizontally center in the page [closed]

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 5 years ago.
Improve this question
How can i align button at center of html body. Any one help me
Page View of button
You can give the button the following CSS code:
button{
margin: 0 auto;
}
You can also use flexbox on the container of the button:
.container{
display: flex;
}
You can then use the following:
button{
margin: auto;
}
Here you go, basic one. You didn't provide a code so we can't provide an answer using your code.
body {
text-align: center
}
<button>center</button>

Three Tables Horizontal [closed]

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)

Moving my right sidebar more to the right [closed]

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

White Line appears on top of my page when I style a Image [closed]

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.

Unspecified height of div [closed]

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
My page here on the left hand nav is showing the categories (div.cat) spaced out at 48px height and I can't work out why.
There's no padding or margins or height specified. If someone could have a look on an inspector to see what could be causing it that'd be great.
The clearfix is causing issues within the child. The whole structure is a tangle of block and inline elements that should be cleaned up in one way or another. Any block elements within each category seem unnecessary. You probably also want to use a ul for greater semantic meaning.
There is class .cat declared in the css file.
.cat, .cat a {
padding: 0 5px;
color: #444066;
}
remove the padding from there or reduce the padding from 5px to 0px
and another thing is found is in the body class
body {
line-height: 1.6;
font-size: 15px;
}
which increses line-height of all divs and elements