When the browser window is shrunk the site title goes to the bottom of the navigation window instead of staying centered in it.
Question: Does anybody know how I can have the site title remain centered in my navigation bar until the browser window is small enough that it goes above the list items as I want it to?
My code is here: http://jsfiddle.net/MyersAN/oupkw4uv/
The HTML code for the site title is:
<span>Hyperdog Productions</span>
Thanks!
I went into the fiddle and changed the styles for .logo to:
.logo {
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
letter-spacing: 10px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
text-transform: uppercase;
color: #AF7817;
vertical-align: bottom;
}
I got rid of the position: absolute; stuff and added vertical-align: bottom;
Related
My link wraps to the second line when it's to long to fit. The problem is that it's not vertically aligned with the first word. How can I do that?
color: #353748;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 10px;
text-indent: 10px;
text-decoration: none;
How it looks like.
It may be fault of the indentation and you may be able to fix it by getting rid of text-indent and putting some horizontal margin if the text is too wide.
How to align the text within an h1 box to the bottom of it.
<h1 class="woocommerce-products-header__title page-title">All</h1>
Here's the current css:
h1.woocommerce-products-header__title, h1.entry-title {
font-family: 'Noe Display Bold', Times, serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 3px;
border-bottom: 1px solid #000;
padding-bottom: 7px;
line-height: 1;
}
h1.entry-title {
text-transform: none;
}
I am inspecting using Chrome Version 81.0.4044.92 on Ubuntu.
Looks like you are seeing the line height. So your fix might be: line-height: 1.
But when your H1 will wrap long texts this will result in unreadable text.
(I assume you checked the bottom padding)
I have a website with text that I've set to #666666 in CSS. This color persists just fine across browsers- however, when I view the site on a Windows machine, the text appears a much lighter shade of gray, despite my using the same browsers (Firefox and Chrome). This problem only occurs within the content elements- the nav bar is also set to #666666 and it behaves as desired.
The CSS for the nav bar:
a.nav {
color: #666666;
font-size: 48px;
font-family: 'Raleway';
text-align: center;
text-decoration: none;
margin-top: -50px;
}
The CSS for my content (this is the stuff that changes color):
#content {
color: #666666;
font-size: 18px;
font-family: 'Raleway';
width: 470px;
margin: 0 auto;
margin-top: 15px;
line-height: 128%;
text-align: justify;
}
Any ideas about why this might be happening and what I can do to remedy it?
may be rgb color as it may be more consistent applied on different elements.
color: rgb(102,102,102);
The button has these basic styles to make it look sort of 3D with a flat look.
background-color: #7a7acc;
border: none;
border-radius: 10px;
box-shadow: 0px 4px 0px #4747b2;
color: #fff;
font-family: Lato;
font-size: 16pt;
font-weight: bold;
height: 36px;
How can I make it appear pushed down like it appears now with the box-shadow, except above? I considered using -4px instead of 4px, but that doesn't move the button down 4 pixels. How can I do this properly? I also have to move the text down 4 pixels.
if you want to button to appear pushed down when its pushed down
add and active psuedo class and then position relative and then add a top:#px to it
.btn:active{
position:relative;
top:4px;
}
here is a demo http://jsfiddle.net/p5w4x/
If the idea is to center either button vertically, this should do the trick:
vertical-align: middle;
I'm working on my site and i want there to be an horizontal line by the right side of the page headers. Currently this is the code for my header, stripped css.
#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}
Alongside:
<div id="newhead"><?php the_title(); ?></div>
But for some reason i cant get the lines to show by the side of the header text.
Please help. http://jsbin.com/ILOlivI/1/edit
I think I would use a background-image in the header row that is overwritten by a background-color of the text. Something like this:
<div id="newHead"><div>the header text</div></span>
#newHead {
background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
}
#newHead div {
background-color: white;
display: inline-block;
padding-right: 10px;
}
Here's a jsfiddle example: http://jsfiddle.net/mVqY6/
This will only work if the text is not too long and if the text is positioned over the background image. In that case you'll need to do some tweaking.
If you are trying to put in a horizontal line level with the mid-line of the text, border-bottom is not really going to work is it?
Off the top of my head I would be using a single pixel .gif image stretched to 100% of the remaining space and aligned to the middle of the text... or if you want pixel perfect alignment to a specific text size, use a 1px wide .gif that has your line in it, plus x number of transparent pixels below.
You could introduce an SVG line, or float a DIV beside your text that is half height, with a border top or bottom. The DIV solution would probably make the most sense if you want to stay in pure CSS/HTML.