I'm not even sure if the question title makes sense. Basically, I have a topnav that is responsive and it is working the way I want it except for at a certain point between the media breakpoints. The problem is that the name of the person in the link is too long, so it makes that tab much bigger when the screen is minimized. Any help is much appreciated!
I tried changing all px to % but it didn't fix the issue. I tried creating a new class for that specific tab as well, but it quickly became too cluttered and didn't give me the results I was hoping for anyways. I also tried adding css in the for that specific tab. I'm not sure if this is a padding problem or a font-size problem.
https://imgur.com/a/0m01w16
//default topnav CSS//
.topnav {
overflow: hidden;
background-color: #555;
color: white;
cursor: pointer;
padding: 14px 14px;
border: none;
float: left;
font-size: 80%;
text-align: center;
display: inline-block;
text-decoration: none;
width: 25%;
outline: 0;
}
//media breakpoint for tablet//
.topnav {
overflow: hidden;
background-color: #555;
color: white;
cursor: pointer;
padding: 14px 16px;
border: none;
outline: none;
float: left;
width: 50%;
font-size: 90%;
text-align: center;
display: inline-block;
text-decoration: none;
outline: 0;
}
I don't want the formatting to be out of line. I want everything in-line until the media breakpoint but that isn't happening.
Related
I want the button not to change its size in width when the screen size gets smaller. What should I do to keep the shape of the Add admin button the same?
This is how the button shanges its shape:
My buttons
I want the shape to stay like this:
Desired result
Here is my CSS code:
.button {
background-color: black;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
padding: 10px 25px;
You do not need to widen the buttons at all
Just control the text so that it does not break the line on different devices
.button {
...
white-space : nowrap;
overflow : hidden;
text-overflow: ellipsis
}
Add white-space: nowrap;
.button {
background-color: black;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
padding: 10px 25px;
white-space: nowrap;
}
{
min-width: (desired value) px!important;
max-width: (desired value) px!important;
}
Putting a static value should work :) Put them the same value if you want the exact same in all devices :)
I need help with the code of a project I've been working on. I can't make my navigation bar fixed so it always appears on the top of the viewport. I understand the rules of CSS position and I've been looking at examples and tutorials, but for some reason, I'm stuck.
I tried to make the position fixed for the navbar and relative to the container, along many other changes. Every thing I tried, it messes up my content. I guess this is one of those moments when you need help.
This is the link to the project and the code of the navbar without any position rules.
https://codepen.io/aitormorgado/pen/MWayXPy
#title-wrapper {
display: flex;
justify-content: center;
align-items: center;
font-family: "Aclonica", serif;
color: #281c1c;
font-size: 6rem;
text-transform: uppercase;
margin: 3rem 1rem;
}
li {
list-style: none;
}
#header-img {
width: 6rem;
padding-right: 1.5rem;
}
#nav-bar ul {
display: flex;
flex-direction: column;
align-items: center;
font-family: "Libre Baskerville", serif;
background-color: #990000;
color: #e0e0e0;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-transform: uppercase;
font-size: 4rem;
}
#nav-bar ul li {
border: 2px solid black;
width: 100%;
text-align: center;
}
#nav-bar ul li a {
text-decoration: none;
color: inherit;
padding: 1.4rem;
display: block;
}
#nav-bar ul li:hover {
background: #cc3300;
}
A million thanks for your help!
as per your question, I just chnaged a small thing in your code and now your header is fixed at the top while scrolling,
all you need to do is use of
#header {
position: sticky;
top: 0;
z-index: 99999;
background-color: #E0E0E0;
}
on your header. and the background color is given so that rest of the bottom elements will not appear below it while scrolling,
If need something else, or I have not understood your question, then feel free to share.
just check the codepen here.
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%; }
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 a logo laid out in a box at the top of my page using the following style elements:
div.imgBox {
margin: 0%;
padding: 1%;
border: 0px;
background-color: #00A7FF;
}
div.imgBox img {
display: inline;
margin: 0px;
padding: 1%;
border: 0px solid #00A7FF;
}
Which does an okay job of allowing me to position the image how I want it in an area at the top of my page (along with some other elements such as nav items). I'd like the whole thing to display without a border so it fills up the whole of the top of the browser window. I can achieve this by adding:
body {
margin: 0px;
padding: 0px;}
But when I do this it causes the image in the box to be clipped. I'm sizing the image in the html:
<img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">
The image only clips when I add the body margin and padding, my question is: how do I get the elements at the top of the page to display so they take up the whole browser window width and go right to the top without the image clipping?
Here is the whole source, as requested:
div.imgBox {
margin: 0%;
padding: 1%;
border: 0px;
background-color: #00A7FF;
}
div.imgBox img {
display: inline;
margin: 0px;
padding: 1%;
border: 0px solid #00A7FF;
}
.hdrBox {
display: inline;
float: left;
margin: 0px;
width: 100%;
background-color: #00A7FF;
}
a:link {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
navBar{
float: right;
right: 5vw;
top: 10vw;
list-style-type: none;
margin: 0;
padding: 0;
}
navElement{
font-family: "Arial", Helvetica, sans-serif;
font-size: 2vw;
color: #FFFFFF;
float: right;
display: block;
width: 10vw;
border: 0.25vw solid #FFFFFF;
padding-left: 1vw;
padding-bottom: 0.25vw;
padding-top: 0.25vw;
margin: 0.25vw;
}
That's in style tags in the head section of the HTML and then some fairly simple (until I get the style sorted!) HTML in the body:
<body>
<div class="imgBox">
<img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">
<navBar>
<navElement>Contact</navElement>
<navElement>Examples</navElement>
<navElement>Services</navElement>
<navElement>Profile</navElement>
<navElement>Home</navElement>
</navBar>
</div>
<div class="hdrBox">
</div>
I plan to move the style elements to a separate CSS once I've got it sorted. This works fine but when I add the aforementioned body margin padding elements to the start of this it clips the image.
This is how it displays in Firefox. Note the clipping on the text at the bottom and left of the logo, minor admittedly but still annoying the heck out of me!
I must apologise, I think it must have been my twin screen setup! It displays perfectly on my laptop when I run it in single screen mode. MASSIVE facepalm! When I reconnect the second monitor and refresh the clipping is still evident (although apparently slightly less so since a reboot so maybe Dave had something with the cache issue?) Thanks to all who've contributed and SIGNIFICANT apologies for having wasted your time on this! Really should have stripped it down to basics and tried to remove all variables before posting, I've overcomplicated the issue (gonna claim noob numpty for my lack of experience in website building as the cause).
Anyway, big thank you for being my rubber ducks (Coding Horror - Rubber Duck Problem Solving)
Tempted to give myslef a downvote for this...