Hey guys I am having trouble styling my navigation so that is will always be at the same position on a page no matter the browser....
I have the following:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 35em;
top: 4.7em;
right: 0;
}
This is positioned, exacly where I want it in chrome and firefox but not in IE. Also if I change resolution it changes the positioning a little. I want to know how I can always have it at the same spot it is suppose to.
Let me know if you need anything else!
David
update:
http://jsfiddle.net/MVpkP/ - is the styles that I have in it and the layout.
The one above this is Chrome and the one I want it to remain like, that's how I want it styled.
Put this in your header
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
Create an additional css file for IE and adjust your IE css accordingly.
you should either use % on your left/right/top, or put this element inside another element.
for example:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 3%;
top: 1.5%;
right: 0;
}
As for putting it in another element:
#wrap{
width: 700px;
margin:0 auto;
}
<div class="wrap">
your menu stuff...
</div>
either of those should solve your problem
Related
I'm new to coding and I'm in the process of creating a website for my father to help build experience and a portfolio.
I'm using unsemantic & normalize.
The problems I am having are as follows;
1) I can't seem to align the bottom of the words "Michael Gilsenan" with the text in my nav bar. I have tried using the line-height property but it's behaving inconsistently and moving in all sorts of strange ways.
2) I'm trying to create a line under the header either by using the <hr> tag or by using the border-bottom property. Both of which eventually create a scroll bar on the <div> which houses my <nav> element.
I have been trying to find a solution for a good 4 hours and have done lots of reading. I apologise if I'm missing something obvious, I'm very tired now!
Thanks very much.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="../external/css/normalize.css">
<link rel="stylesheet" type="text/css" href="../external/css/unsemantic-grid-responsive-tablet.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body class="grid-container">
<header class="grid-parent">
<div class="grid-50">
Michael Gilsenan
</div>
<div class="grid-50">
<ul>
<li>About</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</header> <!-- end of header-->
</body>
* {
margin: 0;
text-decoration: none;
}
hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
}
/* header styles */
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto;
border-bottom: solid #cacaca 1px;
}
header a {
color: #332e2d;
}
.headertext {
font-family: 'Montserrat', sans-serif;
font-size: 300%;
letter-spacing: -0.01em;
line-height:
}
ul li {
display: inline;
}
ul {
word-spacing: 0.5em;
text-align: right;
}
On the ul
line-height: 55px; /* match the height of the headertext. */
On the header
overflow-y: hidden;
https://jsfiddle.net/wazz/ad6g2woq/63/
The trick was to find out what was causing the scrollbar. I selected the ul and went through the options and for scroll a 2nd scrollbar was added, so I new it wasn't that. Eventually I found that the scrollbar was on added on the header.
P.S. You should use a header tag <h1> for the headertext instead of making the text bigger (300%). Search engines look for header tags to understand the page (SEO). You can adjust the size of header tags in your css if it's too big or small, and still use the tag.
The scrollbar is appearing because you have the overflow property set to auto in the style declaration for the header element:
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto; <-- change or remove this
border-bottom: solid #cacaca 1px;
}
Auto gives the browser control over what to do when the contents of a container do not fit within the dimensions of the container and will often add scrollbars where you don't intend them. Removing the overflow property or setting it to none will eliminate the scrollbar.
I am not familiar with the unsemantic stylesheet that you are using but it appears to apply a float-based layout. This makes alignment of items within a container very difficult. As an alternative, I would suggest looking into flexbox. There are a few good tutorials out there. I have used all of these and can vouch for their quality:
What the Flexbox by Wes Bos - https://flexbox.io/
A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy - https://flexboxfroggy.com/
To achieve the layout I think you are aiming for with flexbox requires the following:
Remove the unsemantic grid classes from your HTML
Replace your CSS with the following
* {
margin: 0;
text-decoration: none;
}
/* hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
} */
/* header styles */
header {
display: flex;
align-items: flex-end;
height: 80px;
font-family: 'Open Sans', sans-serif;
/* overflow: auto; */
/* the overflow property is setting your scrollbar. If you don't want the scrollbar, set to none : */
/* border-bottom: solid #cacaca 1px; */
/* Here, your properties are in the wrong order.
it should be:
1. border size
2. border type/style
3. border color.
Like this: */
border-bottom: 1px solid #cacaca;
}
header a {
color: #332e2d;
}
.header-text {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
letter-spacing: -0.01em;
/* line-height: */
/* When you leave in style properties with no value, this will often break your stylesheet. I've commented this out. */
}
header nav {
padding: 10px;
display: flex;
}
header nav ul li {
display: inline;
align-items: flex-end;
margin: 0 20px;
}
I added in some comments about a few other things I noticed in your CSS. To see a working sample, you can check out this pen:
https://codepen.io/danyadsmith/pen/mKjyKQ
Normally, I would attempt to answer the question by telling you what you could do to achieve the result you want with the technologies you are using, but in this case I think the grid system you selected is causing your frustration. Flexbox is gaining adoption in modern browsers and can safely be used in projects that don't need to support legacy browsers. For more information on that, check the flexbox section on Can I Use:
https://caniuse.com/#feat=flexbox
Hope this helps. Good luck!
I'm having trouble finding a way to add yellow blockquotes to my quote without it indenting/adding unwanted line height.
Here's what I'm trying to achieve:
Here's what I've tried:
.contentquote {
font-family: 'Roboto Slab', serif;
font-size: 20px;
}
.quote {
line-height: color: #003b49;
font-size: 2.9em;
}
<h1 class="contentquote"><span class="quote">“</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">”</span></h1>
Here's what I keep getting:
Any help would be greatly appreciated!
You have three problems with your code.
First, you have accidentally combined line-height and color as line-height: color:. You don't specify a line-height in your sample code, so I'm guessing the line-height is simply a typo. If you're actually using a line-height, you'll need to separate these out, using a semicolon.
Second, you forgot to include the font reference in addition to assigning it to .contentquote. The Roboto Slab font can be found at Google, and linked with <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">.
Third, #003b49 doesn't correlate to a yellowish orange; it correlates to a bluish green. You'll need to substitute this for the appropriate colour. The exact colour used in the example is #fdb527.
For the actual positioning of the quotes, you're looking to apply position: absolute to .quote. Set a negative margin-top on it to bring it down, inline with the text. Then use the pseudo-selector :first-of-type to shift the quote to the left of the text with a negative margin-left on .quote:first-of-type. Finally, to offset the negative margin, set a padding-left on .contentquote.
Here's a working example:
.contentquote {
font-family: 'Roboto Slab', serif;
font-size: 20px;
padding-left: 22px;
}
.quote {
color: #fdb527;
font-size: 2.9em;
position: absolute;
margin-top: -16px;
}
.quote:first-of-type {
margin-left: -22px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<h1 class="contentquote"><span class="quote">“</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">”</span></h1>
Hope this helps! :)
To solve your actual problem...
I'm having trouble finding a way to add yellow blockquotes to my quote without it indenting/adding unwanted line height.
You can use position: absolute on the quotation marks to prevent them from interfering with the flow of the paragraph. I also indented the paragraph to create a gutter for the starting quotation mark.
.contentquote {
font-family: 'Roboto Slab', serif;
font-size: 20px;
padding: 0 0 0 20px;
}
.quote {
color: #fdb527;
font-size: 2.9em;
position: absolute;
margin-top: -16px;
}
.quote:first-child {
left: 0;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<h1 class="contentquote"><span class="quote quote--start">“</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">”</span></h1>
Try the code below. :)
In my part, I used CSS pseudo elements :before and :after to the quotes.
*{ box-sizing: border-box; -webkit-box-sizing: border-box; }
.contentquote {
font-family: 'Roboto Slab', serif;
font-size: 20px;
max-width: 350px;
width: 100%;
padding: 15px 25px 56px 40px;
background: #e4e4e4;
color: #575757;
position:relative;
}
.contentquote p{ position: relative; display: inline-block; margin: 0; }
.contentquote p:before, .contentquote p:after{ color: #fdb527; font-size: 2.9em; position: absolute; }
.contentquote p:before{ left: -28px; top: -13px; content: "“"; }
.contentquote p:after{ bottom: -35px; content: "”"; }
.contentquote h2{ position: absolute; font-size: .7em; right: 28px; bottom: 18px; font-weight: normal; }
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<div class="contentquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor do eiusmod tempor.</p><h2>Temporary Name</h2></div>
EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/
Question:
How do I style different elements of a HTML website properly? I've looked all over the internet and read books but am still sort of struggling.
Issue:
My problem is that I have a main heading, which is like the main "title" for my website which displays the website name, but to the left of my heading, I want to style a vertical navigation bar which will be in-line with my heading. Yet I am having trouble styling the navbar and heading to work next to each other, rather than one of them being on top of the other.
JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="homepage.css">
<head>
<title>CSGOWin | Win Big!</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Giveaways</li>
<li>About Us</li>
<li>Contact Us<li>
</ul>
</div>
<h1>CSGO Win</h1>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
background-image: url(bgimg.jpg);
width: 100%;
height: 100%;
background-size: 100%;
}
h1 {
font-family: Arial, Verdana, sans-serif;
background-color: #FFA500;
border-style: solid;
border-radius: 25px;
text-align: center;
margin-top: 50px;
margin-left: 350px;
margin-right: 350px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 45px;
}
ul {
list-style-type: none;
margin-left: 50px;
margin-right: 85%;
margin-top: 50px;
background-color: #FFA500;
}
li a {
font-family: Arial, Verdana, sans-serif;
display: block;
}
.navbar{
}
Finally, I am very new to stack overflow, so I apologise if my question is not fully detailed. I will answer questions if there are any. Thanks for your kind help.
Like mentioned in the comment you can use float: left see this pen http://codepen.io/anon/pen/bpWzeK?editors=1100. Another way to do it is by using flex.
you can add class or id attributes to certain html tags and then in your stylesheet reference that class or id
->.navbar{
}
that references any tag with "navbar" class will get the style in that block
->#thisIsAnID{
}
that references any tag with the id " thisIsAnID" id
so . is used for classes
is used for ids
I have the following CSS:
#main2 {
width: 680px;
margin: 0 auto;
padding: 0;
}
#header2 {
text-align: center;
margin: 0 auto;
padding: 0;
height: 31px;
line-height: 31px;
}
#contents2 {
text-align: center;
margin: 0 auto;
border: 3px solid #0F446D;
padding: 0;
padding-left: 15px;
height: 365px;
background: url('theImages/certBG.png') no-repeat bottom;
}
#store {
background-image: url('theImages/certHeader.png');
width: 231px;
height: 31px;
padding: 0;
margin: 0 auto;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial;
font-size: 14px;
}
But this page: Non Working Page
shows the header "Your Information" differently than this page: Working Page
Can anyone please let me know why? and how to make the first page show the header correctly.
You require a different CSS style-sheet for internet explorer(IE):
Refer line 8,9 and 10 of following page source(by clicking ViewSource in IE) .
<!--[if IE]>
<link href="theScriptsStyles/mainStyle-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Page Link-1 includes IE Style-Sheet while Page Link-2 do not.
Both page looks identical in other browsers(Chrome, Firefox).Looks different in Internet Explore because of mainStyle-ie.css
IE always has CSS issue. Therefore,you have to target specifically your style-sheet for IE only. You will need to put condition code(like above) on heading section of the page.
#store22{ display:block;}
OR
Add display:block; on line 22
and it works excellent as your demands. :)