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 have a page set up however I am having trouble aligning the news articles to the center of the page.
Here is a link to what I have so far -
http://casb1.cloudapp.net/1016/1be61016ff9a717aa34c2adf7c5aa79e/3D%20Design/news%20articles/news.html
Basically I need the red area to always be the same distance from the edges, even when it expands. Is this possible?
The red container has the css of position:absolute
Any help would be hugely appreciated.
PS. this is only my first week of learning css and html so please forgive me if it is something simple.
Thanks
I think you don't need the position:absolute you can delete this property and add this:
.collection {
display:table;
margin:auto;
}
There's a lot that can be impoved, but going to your question, I'd do something like this:
.collection {
position: static;
display: inline-block;
}
.roundcont {
text-align: center;
}
You basically need to remove the position: absolute; attribute from your .collection element and change its display to inline or inline-block and then set text-align center; to its parent div so now it looks centered.
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 8 years ago.
Improve this question
I am fixing up a website for a tech night at my school. The navbar was on the side which isn't my favorite view for the bar so I put it on top, but I can't get the table data or menu to center in the div.
http://jsfiddle.net/ksta1584/c88qswsx/
<a href="http://jsfiddle.net/ksta1584/c88qswsx/">Link<a/>
I would also like instead of the lines disappearing when you scroll over that they are all in equally sized boxes and the boxes sort of "pop" out. I'm not sure how to do that and can't get the border to appear.
Do this in your .nav:
.nav {
width: 100%;
text-align: center;
position:relative;
top:35%;
}
Put margin:0 auto into your .nav rule
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 8 years ago.
Improve this question
I am working on a beginner project as I am new into web dev/design and am trying to center these images. I've included a link with screenshots of my code and the webpage in Firefox.
What normally works if your images are not wrapped in another div.
.grid {
margin:0 auto; // Shortcut for margin-left:auto and margin-right: auto
width: 1000px;
text-align: center;
}
What it does is align all of the contents to the center of the div.
However since all of your images are wrapped in another element they will not center depending on your styling of container elements.
What i would say is the best way to approach your issue:
http://jsfiddle.net/c0oku4zu/2/
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
Here is a CodePen example: http://cdpn.io/wlEpA
As you can see, all of the texts line height is different, even though each element has the same CSS.
Is this an issue with the font?
The text should all be the on the same line.
Edit: 2 people have said this post is not clear or useful, at least explain why so I can make it more clear, your vote on my post is also not clear or useful.
The issue is the padding: 50% 0; style on the .ml elements. 50% is a relative value. Those elements currently vary in width, depending on the size of their content, and that affects how the padding is calculated.
Specify a width or min-width for the .ml elements and they will line up correctly. Here is your CodePen example, with min-width: 100px; added: http://codepen.io/anon/pen/mbsnH
One solution, is to set the line-height on the .mi css class.
.mi {
float:left;
cursor:pointer;
border-top:#222222 4px solid;
margin:0em 1em;
height:90%;
line-height:85px;
}
Example: http://jsfiddle.net/NerLZ/1/
i.e. to make it the same height as the .menu class.
(If I've understood the problem correctly).
Martyn, you have display:inline-block on your links, and you have float:left on your divs. That's redundant. And inline-block creates margin inconsistencies. Turn off inline-block and that will fix your problem.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
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
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 am trying to get a slider that drops down from the top of my page to go over my menu but can't.
I have applied a position: relative to both of them and tried to put the z-index of the menu to 0 or -10 and I have but the slider to z-index: 10000 with it also postion: relative but it's still going behind the menu.
The page is at http://www.tassolarpanels.com.au/ and the slider in question is the blue "Get a Quick Quote" button on the top right of the screen. As you will see when you press it - it goes behind my menu.
If anyone has any ideas what I am doing wrong I would much appreciate your help!
You need to make sure that the parent element, in this case, #sliding-panel-container, has the correct z-index applied which it currently doesn't -- it is listed as z-index: 1 which is why it's showing behind the navigation listed as z-index: 2.
Try this:
#sliding-panel-container {
... /* Whatever your other CSS is here */
z-index: 3;
}
Add to your .site class:
position: relative;
z-index: 0;
#sliding-panel-container {
display: table;
position: relative;
width: 100%;
z-index: 9999;
}
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
Anyone see why my footer is all shifted over with the image as well as the links and copyright isn't showing as it should?
http://kansasoutlawwrestling.com/
mockup:
http://kansasoutlawwrestling.com/assets/images/wrestling2.jpg
You are floating your <li> elements to the left.
Remove the float left and change the css on these to display: inline and it will look much more like your mock up.
It's because line #58 of v1.css floats the whole thing left.
#footer ul {
list-style: none outside none;
margin-left: 40%;
text-align: center;}