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'm trying to get my nav bar to basically, look nicer, I've designed it mostly how I want it in CSS, but each link is the size according to it's word size, so each block/link is sized differently (hope that makes sense) so I'm wanting to make them all the same size not/not dependent on word length. I'm also wanting to change the color behind the links (basically make it so the color stretches to the sides) I included a link to a picture explaining what I'm talking about: http://postimg.org/image/mdoq7vwy7/ . Thanks in advance!
You'll want to use flexbox. Flexbox can make all the item the same size regardless of the content.
JSFiddle
ul{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
list-style-type:none;
}
ul li{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
text-align:center;
}
PS. It's hard to give you help without you providing any code
To make each link in the navbar the same width, give them all the same class and do this css:
.list-class { width: 100px; }
And to make the color stretch past the margins, I would try this:
li { padding-left: 5px; padding-right: 5px }
Assuming you are using lists for your navbar. It's a little hard to help without the code but hopefully this helped
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
As a novice web developer I've been trying to build myself a personal webpage from scratch. However I've encountered a problem.
Here's my webpage, it looks ok but when you click any of the links on the left side, and turn a # to display:block from display:none you can see the "bleeding" on the bottom.
I have no idea why this happens, so I'm linking my repo which contains the html and the css for the page.
Put a simple CSS in your Canvas Tag
style="position:fixed"
and its Done
If I understood your question you want to remove the green band at the bottom of the page.
It comes from your background-color:
body {
/* background-color: #A7DBD8; */
}
Juste remove it and it's ok ;)
Remy
Changing the style on the canvas element from
display: inline-block;
to
display: block;
fixes this.
Delete the :
<div class="footer">
from the index.html because you're not using it
Your panes are a fixed width and height: 620px, 500px respectively. If you add padding-top: 100px to a pane (as you did with #links div), it will increase your height to 600px and push things down.
The quick fix is to, instead of adding padding-top: 100px to your #links div, add it to the first paragraph in your #links div.
#links p:first-child {
padding-top: 100px;
}
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 made some changes to my Tumblr so that it can match my Wordpress blog. I swapped the header out, but now I have a huge space between the header and the nav bar. Any ideas about how I can get rid of it?
You can see my Tumblr here.
I am trying to replicate my blog as much as possible.
Thanks for any tips.
You have an empty container div.
Either delete the container, or put the following in the CSS;
#container {
display: none;
}
or you could set the padding on the #container rule to 0.
Hope this helps.
EDIT: On closer look, you do need to delete your entire container. Delete all this code;
<div id="container">
<div class="blogtitle">
</div>
<div class="description"></div>
</div>
and then delete the styles for #container, .blogtitle, and .description (unless you think you might need them later).
After reviewing you web site I found the issue: Just you need to make following change in CSS:
div#page{
margin: 0px;
}
#masthead{
margin-top: -15px;
}
That's it.
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 need a help. Plz see the attached image. I am trying to make grid using html ul li with any height. I am trying to put column one after another without any white space in between . But unfortunately 4th column is going bottom. How to fix ?
ul.brik{
margin-left:-5px;
}
ul.brik li{
display:inline-block;
width:32.5%;
margin-left:5px;
vertical-align:top;
}
Assuming you don't mind ordering your columns vertically instead of horizontally, and you don't need this to work in older browsers:
display: flex;
flex-flow: column wrap;
With possibly some other flexbox properties should get you that layout.
This is happening because each ul appears at the top of the line it is currently in. Once a line break is introduced, the next ul will appear where you see it.
To solve this, separate each column by a div, and put the uls inside.
You'll need to set the display of the divs to inline-block for them to stack horizontally.
i'm not quite sure what it is you're looking for. it looks like you separate them with more divs, also i think for your purposes you can add a
min-height:50px;
max-height:250px
overflow:hidden;
/* you could also try*/
position:absolute;
top:20px;
left:20px;
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.
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
Recently I created a new horizontal navigation for my 2 sites but on one site it looks good, yet on another I am having trouble controlling the positioning.
For example, If you review the horizontal navigation links at the bottom of the header image here: http://classifieds.your-adrenaline-fix.com/ you'll likely agree that it looks good but if you click any of the horizontal links these will take you to the main site where you will see the same horizontal navigation but the problem is I can't gain control of the positioning nor can I seem to figure out why the 2 are different with nearly identical HTML and CSS.
If anyone wouldn't mind taking a look at the link I provided above you'll see what I'm talking about and if anyone wouldn't mind showing me what Im missing, I'd be most appreciative and I thank each of you in advance.
PS; I've been trying for hours...
On the page that looks correct, your <ul> has the following styles defined in form-css.css around line 70
list-style-type: none;
padding: 0px;
margin: 0px;
The main page does not have this styling. The important parts being the padding and the margin. Default styling on a list usually gives some pad and margin to a ul, which is what we are seeing in the main page.
I compared the CSS for the two pages using chrome developer tools. As you said they are almost identical in HTML and CSS but I did find a difference.
This page:
http://classifieds.your-adrenaline-fix.com/
**The ul tag has some css properties applied to it which are not present in the other page( the page which is messed up) namely:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
This css clip I found in the form-css.css page.
Removing this css part, messes up the page where the horizontal navigation is looking fine as well.
By adding these CSS properties to your ul tag for the horizontal page links for the other page(http://www.your-adrenaline-fix.com/) should fix it.