I am currently a student learning HTML and CSS to become a web developer and i am having some trouble with getting my navigation buttons to properly display as the page window is resized. I want them to stack on top of one another like blocks but instead they overlap as you can see. Webpage Example
I'm sure i'm missing something obvious, but i would greatly appreciate the help.
Thanks!
body {font-family: verdana, arial, sans-serif;
background-color: #523925; }
header { text-align: center;
padding-top: 50px;
background-image: url(coffeemug.jpg);
height: 120px;
font-size: 400%;
font-family: verdana pro black;
font-weight: bold; }
nav { text-align: center;
margin-top: 20px;
max-height: 150px; }
nav a { text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
font-size: 120%; }
footer { text-align: center;
margin-top: 20px;
font-size: small; }
#wrapper { width: 95%;
margin-left: auto;
margin-right: auto;
background-color: #EAB987; }
.charpic {max-width: 100%; }
#media only screen and (max-width: 1024px) {
nav a { font-size: 100%;
padding: 8px 50px; }
}
By default, a tags have display: inline, which lets them display side by side and fit as ends up not respecting margins very well. As noted in a previous answer, changing them to display: block will get them to respect margins, but prevent them from sitting side by side unless you add additional logic.
Probably the simplest change to get the behavior that I think you're looking for is to make them display: inline-block, which will continue to lay them out side by side but treat them as block elements that won't overlap as they end up wrapping. This would look like:
nav a {
text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
display: inline-block;
font-size: 120%;
}
You could also do this by using flexbox, making nav a flex parent with display: flex and then using flex properties to determine layout. This would be a bit more of a change, but I think probably get you a nicer solution. As an example, if you wanted to have them overflow when necessary and be centered each line, you could do:
nav {
display: flex;
justify-content: center;
}
try adding display: block; to the a element, like so:
nav a { text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
display: block;
font-size: 120%; }
Related
I'm new to prgramming. I'm trying to align the multiple buttons on top to the center of the page, I have tried text-align and margin: 0; none of which have worked. Now, I have centered the buttons but the buttons are below each other. Is there any fix to this? How exactly do I center it? I'm using flask.
CSS:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
width: 43%;
padding: 5px;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/*The buttons that I want centered*/
#dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
border: none;
outline: none;
background-color: transparent;
color: #606060;
top: 30px;
font-size: 27px;
font-family: 'Roboto', sans-serif;
width: 40%;
margin-left: 30%;
margin-right: 30%;
}
This is the image. The border is aligned to the center and is supposed to contain the buttons next to each other as a Nav bar. I want each of the buttons to be centered too. I want all the buttons to be centered at the same place and then I will move each button individually to the left and right. But if you know a way to center all of them side by side, please let me know.
you have some problems in your CSS code that prevent you to reach your goal:
each button has a big margin on left-right, which makes it so that not enough items can fit in a single row
when you set each button size as percent, it refers to the parent element. if you have more than 2 buttons with 40% width, they will overflow the row to the next one.
about how to style multiple elements at the same time: Right now, you style each button based on its id, which is unique. But classes can be applied to multiple elements simultaneously, giving them all the same styling. So Instead of styling through ids (with #), I'm styling based on .btn, which tells the CSS to style everything with the class (represented by a dot) that's called btn
I also set display: flex, align-items: center, and justify-content: center on the parent element to tell it to align all items to center both horizontally and vertically.
so, here's a demo:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
min-width: 43%;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/* The buttons that I want to be centered */
.btn {
border: none;
outline: none;
background-color: transparent;
color: #606060;
font-size: 27px;
font-family: 'Roboto', sans-serif;
/* used to show a line seperator */
padding: 0 0.5em;
border-right: 2px solid black;
}
/* Remove border for last item */
.btn:last-of-type {
border-right: none;
}
<nav id="navBar">
<a class="btn">Deals</a>
<a class="btn">Burgers</a>
<a class="btn">Drinks</a>
<a class="btn">Sides</a>
<a class="btn">Desserts</a>
</nav>
I am trying to get the Z to come in the middle of the cricle but I am not sure why its not coming in the middle. My code outputs this
<li class="avatar"><span class="profile-initials">Z</span></li>
This is the CSS I have on my application
.avatar {
vertical-align: middle;
width: 20px;
background-color: white;
height: 25px;
border-radius: 50%;
padding-left: 18px;
padding-bottom: 10px;
float: right;
margin: 10px;
}
.profile-initials {
margin-right: 2px;
}
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}
<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
I'm having an issue trying to get the green buttons underneath the header to lay properly across devices. Full desktop is fine, but as the screen gets smaller, the buttons will break between words and go the next line. And on mobile, I'd like them to stack, but they overlap, and I'm trying to add a bottom/top margin, but nothing helps.
http://www.cooldownjuice.com/collections/menu
How can I get this to lay properly?
Here's my code. (added max/min width as suggested on another topic here)
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
max-width: 300px;
}
You'll need to use float, like so
.catbn {
display: block;
float: left;
margin-top: 10px;
}
Also I personally believe the behavior is better when you remove width: 100% but that's a matter of personal preference.
Use
display: -webkit-inline-box;
display: inline-block;
margin: 10px,
And voilà! And you can maintain your center buttons. If you wish, you can float:left/right to align
To avoid breaking of words and overlapping buttons, add following rules in your css
.catbn{
white-space:nowrap;
display:inline-block;
/*Rest of the css*/
}
The best way to do that is to set the a to block. You may use float or display:inline-block
Here is your modified code for button.
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
display: inline-block;/* a as block and inline*/
max-width: 174px; /* Set the width*/
}
Hope this help you.!
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}