Hello I have made a website where my header adjusts to the size of the screen, but the contents inside the header are not adjusting. For instance, there is an image that is unable to adjust itself and ends up leaving the header to go under it once the browser window is resized. Font is also not adjusting.
I have already tried min-width and max-width but it is not working. I am using #media queries and was wondering if there is someway to use this query to make the contents inside the header to adjust themselves along with the header.
My <header> style is as follows:
header {
position: relative;
width: Auto;
height: 239px;
background: #FED93F;
}
Edit
What I have done is added a <header> tag and placed two images, along with a heading inside it. In the heading, the text does not adjust it self. In the image, the first image is a logo and the second is an image on the far right. The logo is placed somewhere at the left, with the text in the middle of it all.
<header>
<img src="images/Logo_image.png" style="margin-left:50px; margin-top:50px"/>
<h1>Company name</h1>
<p>Tag Line</p>
<img src="images/side_image.png" style="position: relative; align: right; float:right" />
</header>
When all this stuff is added, I want it to adjust itself to the size of the window just as the main header does. But it is not being so.
The CSS of the Text:
header h1
{
font-family: "Arial";
font-size: 72px;
color: #6A1111;
position: absolute;
left: 212px;
top: 78px;
}
header p
{
font-family: "Myriad Pro";
font-size: 21px;
color: #404041;
position:absolute;
margin: -35px 0 0 250px;
}
Try this:
header {
position:relative;
width: 100%;
height:239px;
background:#FED93F;
}
header img {
width: 100%;
height: auto;
}
The element inside your header should be 100% wide.
You should try like this -
header img {
max-width: 100%;
}
I hope it will helps you.
header {
position:relative;
width: 100%;
height:239px;
background:#FED93F;
}
header img {
width: 100px; /*Need give fixed width */
height: auto;
}
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
On this page http://goo.gl/m2s1dA
I want to bring the whole header layer "header-container" as below on top of everything and anything inside of "container-site" should appear behind the header when scrolling.
Below is my code.
Full width div
.header-container {
position: fixed;
width: 100%;
z-index: 10000;
}
Fixed width div to center align header and some styling
.header-wrapper {
margin-bottom: -1px;
border-radius: 0;
border-bottom: 1px solid #cc6666;
height: 263px;
position: relative;
display: block;
width: 1140px;
margin: 0px auto;
}
Then body of the page
.container-site {
margin: 0px auto;
width: 1140px;
padding-top: 280px;
}
Currently only the headings (h1, h2, h3) are appearing behind the header. I am using Bootstrap.
From what I understand you want the header to be above all content and fixed to the top of page. In your code, the header-container is inside a fixed parent:
<div class="glass">
<div class="header-container">
...
</div>
</div>
what you have to do is simply add z-index to the parent of the header like this:
.glass { z-index: 1; }
This should fix your problem however, your header is transparent and that creates visual problems when text is under the header elements...
Header is on top but can't figure out it because it is transparent. give .header-container {background:#fff} and see how it looks like.
I often have this problem with a lot of fixed navbars i.e. when I have a fixed navbar, how do I give the element below it some margin, so that the fixed navbar is not covering that element?
I was just wondering if there is a more elegant way of doing this apart from the <br> tag and margin-top.
The sample code would be like:
HTML code :
<nav>
I AM NAVBAR
</nav>
<br><br>
<div>
</div>
CSS code :
* {
padding: 0;
margin: 0;
}
nav {
height: 50px;
width: 100%;
background: #444;
color: #fff;
text-align: center;
font-weight: bold;
font-family: verdana;
position: fixed;
top: 0;
left: 0;
}
div {
height: 500px;
width: 100%;
background: tomato;
}
Fiddle here.
Fixed position relatives to the screen's viewport. You can just set top margin or padding on the body tag, and make the value >= the navbar height.
body {
margin-top: 50px; /*or padding*/
}
http://jsfiddle.net/5k5mxcn1/1/
There's a theory in CSS that you only apply bottom margins.
http://csswizardry.com/2012/06/single-direction-margin-declarations/
So to keep things modular, you could create a wrapping class:
<nav class="nav__wrapper">
<div class="nav__content">
Navigation
</div>
</nav>
<p>Text content</p>
css:
.nav__wrapper {
height: 30px;
margin-bottom: 10px // breathing room
}
.nav__content {
background: #dadada;
height: 30px;
line-height: 30px;
position: fixed;
width: 100%;
}
fiddle: http://jsfiddle.net/wv53qLwz/
A fixed element is position relative to the viewport, meaning it stays at the same designate spot and does not leave a gap in the page where it would normally have been located.
You can apply a top margin to the element that is directly following the fixed element.
div {
margin-top: 50px;
}
However, I've found out that using the scroll-margin property does the trick. It's explained better here https://css-tricks.com/almanac/properties/s/scroll-margin/#aa-enter-scroll-margin
div {
scroll-margin-top: 50px;
}
So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code:
HTML:
<div id="menu">
<div id="about">About Us</div>
</div>
CSS:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
width: 100%;
height: 38px;
}
#about {
background: url(images/button.png);
width: 168px;
height: 51px;
font-family: Anivers;
font-size: 20pt;
text-align: center;
color: white;
line-height: 50px;
vertical-align: middle;
margin-top: 1%;
}
So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).
If I understand your question correctly you need to add display: block to the <a> element and set height: auto; instead. As for the image it should not scale anymore and I centered an image for demo purposes.
DEMO
You can accomplish this by displaying your "a" element as a "block". This will allow you to specify the size of the element independent from the size of the font. You can then inherit the width and height of the "#about" css styling if that's the size of "hover.png", or specify your own size based on the actual size of "hover.png" if its different than that stated in "#about", it sounds like 38px for hover.png is what you want as opposed to the 51px height of the #about parent. Without setting "a" as a block, the font size of the text in "#about", the parent element, would rule the overall size of the a element and styling, and your background "images/hover.png" will only provide a background for that size.
Here's what your a element in css would look like with the 38px height, you could also say "inherit" for the height if desired. I tested this and it works:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}
I hope this helps.
<div id="menu">
<img src="images/4.png" />
About Us
</div>
#menu {
position: relative;
width: 168px;
height: 51px;
}
img {
width: 100%;
height: auto;
}
img:hover {
background: blue;
}
a {
position: absolute;
z-index: 100;
/* top: 0; PLACE LINK CORRESPOMNDING TO IMG
left: 0; PLACE LINK CORRESPOMNDING TO IMG */
background: red;
font-family: Anivers;
font-size: 23pt;
color: white;
line-height: 1.2;
}
I'm having a problem with a design I'm coding that I intend to make creative. Right now, I have a header that has 3 separate areas, one div in the middle with 30% width and two on either side with 35%. In these I contain my header elements. The middle one contains my logo, which scales just fine. When I re size the window it scales down and maintains it's positioning inside the div.
The problem arises when I try to add the navigation on either side. I have the navigation text inside the first div currently, and it doesn't behave how I intend it to. I have it relatively positioned and it doesn't maintain that positioning. When the browser is re-sized the text remains fixed, so at some point, as the divs grow smaller, the text is completely outside it's containing div. Also, at some point the text begins to stack instead of maintaining it's in-line style. I have a separate style sheet that has a few font size media queries to remedy this, they simply drop the font size at certain intervals, but this doesn't do anything. The text gets smaller, but still remains fixed on re-size and breaks out as well as begins to stack.
I simply cannot figure out why this is happening. The logo image remains perfectly in it's div and maintains it's position whilst the text doesn't move at all. I guess I'm just not understanding text properties as well as I need to I've included the HTML and CSS below, I left out the media queries as it's pretty self explanatory.
<div id=container>
<div id=header>
<div id=headerone>
<div id=leftnav>
<ul>
<li>Home</li>
<li>Services</li>
</ul>
</div>
</div>
<div id=headertwo>
<img src="images/title.png">
</div>
<div id=headerthree>
</div>
</div>
and the CSS
html, body {
width: 100%;
height: 100%;
margin:0;
font-size: 100%;
padding:0;
}
img {
max-width:100%;
width: 100%;
}
ul {
list-style: none;
}
ul li{
text-decoration: none;
color: white;
display: inline-block;
padding: 20px;
}
#container{
width: 100%;
height: 100%;
}
#header{
background-size: auto 100%;
width: 100%;
height: 19.1%;
background-image: url(images/headerbg2.jpg);
}
#header img{
width: 70%;
position: relative;
left: 15%;
top: 30%;
}
#headerone{
width: 35%;
height: 100%;
float: left;
background-color:black;
}
#leftnav{
word-break:keep-all;
font-size: 1.5em;
position: relative;
left:10%;
top: 40%;
font-family:Rockwell Extra Bold, Georgia, "Times New Roman", Times, serif
}
#headertwo{
width: 30%;
height: 100%;
float: left;
}
#headerthree{
width: 35%;
height: 100%;
float: left;
background-color:green;
}
I appreciate any help.