I'm working on a personal website template but I can't style the image and the text in the navbar.
I want to fix the aspect ratio of the image to center the navbar, so independently from the height of the navbar, the image will always look the same.
I want to center the text vertically
Make CONTACT into Contact
I'm not using boostrap or other frameworks.
You should check the flex box property, this is really useful. Here is some documentation on the subject and here is an example on how to build the layout you want using flex box.
1.- I didn't understand this one, you want to 'fix the ratio' but the ratio is already fixed and you can change the size of it using percentage on height and width.
2.- Add the next lines to the navbar css:
display: flex;
align-items: center;
that will center vertically all the elements in your navbar, including the image.
3.- Try this:
.navbar li:last-child a {
text-transform: lowercase;
}
or text-transform: capitalize if you want the first letter capitalized.
Related
I'm having a difficult time getting a NavBar to render what I have in mind.
I need a navbar with an increased height (reason because my brand image has a bigger height than the default).
But I also need all menu elements (BUTTON, LI, A, FORM ELEMENTS, NAVBAR-TEXT, NAVBAR-RIGHT) to respect the new height and to properly vertically center in the navbar.
Can someone provide some example HTML/CSS for what needs to be changed?
I have done lots of searching online and there seems to be nothing obvious.
The BootStrap site shows documentation on how to define a navbar, but nothing that I could find regarding height changes.
If you are putting your brand image within the navbar-brand div then you can change the height to the height you need (or height of the brand image) using css:
.navbar-brand {
height: 80px;
}
To align the navbar elements vertically you can give the navbar a top margin to what you need also using css:
.navbar-nav {
margin-top: 40px;
}
You will have to use css breakpoints if these need to be changed for smaller devices.
My Custom CSS is causing any change in making the nav elements center with respect to the height of the navbar. Please Click on this text to see the image
Custom CSS code
you can just add !important beside your line-height number
example
.blabla {
line-height:70px !important;
}
I'm more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/
I've tried numerous methods but I cannot get the logo and the li elements to align properly in the header.I also cannot seem to increase the height of the header.I've tried different methods but no success.
Basically what I want is first to increase the header's size (I have a navbar-static-top header) and make the logo and the ul elements appear properly.However I have no ideea how I can do that.I also want to keep the logo's current dimensions.It does work with the current header if I resize the logo but that's not what I am after.
Bootply
[1]: http://www.bootply.com/BTSfbDudpZ
Add following css
.navbar-brand {
height: auto;
}
.navbar-nav{
margin-top: 50px;
}
http://www.fccorp.us/index.php
The vertical column to the left is my site menu system. The column is a div with a height:100%, and the different details are div's laid over it.
The buttons are DIV's with blank buttons as backgrounds, with links on them. I have two different size buttons, the big one 60px tall and the small one 30px. Using CSS can I get the links to be centered vertically regardless of the height of the button's DIV?
I've looked here and used a few CSS sites & Android Apps. The site here suggests I can't, but I can't understand why the CSS group would not create a vertically centering function since it seems so needed.
Am I just missing something or am I really trying to get something that isn't available with CSS?
Based off your site, you can use line-height to adjust the vertical positioning of the text.
Try applying this to your 30px tall links:
line-height: 30px;
And this for the 60px tall:
line-height: 60px;
Additionally, you should not be nesting <div> tags within <a> tags.
Use this:
.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}
That will center all of your links.
On another note, currently you have the following structure:
<a href="#">
<div>text</div>
</a>
That is invalid HTML. I'm not a "HTML must be valid at all times" type of guy, but when you can fix it that easily, I think it wouldn't hurt making it valid. You should use the following:
<div>
text
</div>
Add this to your CSS. It will work regardless of the height of your buttons:
.menubar a div {
display: table-cell;
vertical-align: middle;
}