I have this code:
<header>
<div id="title">
<img alt="logo" src="/Content/logo.gif" />
</div>
<nav>
<ul id="menu">
<li>Products</li>
<li>Auctions</li>
<li>Segmentation</li>
</ul>
</nav>
</header>
That generate this:
I want that the image will be above the white box(that it will align according to the image). How do I do it?
BTW I use the default asp.net mvc3 template.
Thanks.
I'm assuming you're floating these elements. If so, try setting the overflow property of the header:
header {
overflow: auto
}
If you want it to place 100px above it's natural positon, use this.
#title img {
margin-top: 100px
}
or this:
#title img {
position: relative;
top: 100px;
}
If you're testing this in Internet Explorer < 9, make sure you're defining the tag <header> using
<script type='text/javascript'>document.createElement('header')</script>
or a library and styling it as a block-level element (header{display:block}) before trying to style it.
Related
<h:head>
<title>Facelet Title</title>
<style>
.top{
margin: 0;
padding: 0;
background-color: blue;
height: 15px;
width: max-content;
}
</style>
</h:head>
<h:body>
<div id="header" class="top" >
</div>
<div id="content" class="middle">
</div>
</h:body>
So,I'm trying to fill with color the whole div, but I always get a white border around it. How can I do this?
Aside from what Lennart answered, you need to make sure there isn't other CSS causing this issue, take note of this:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
MDN notes that max-content is an experimental API that should not be used in production code. Unless you are purposely using experimental API I would suggest you stick with percentage values, inherited values, or explicit values.
if you mean that you want to remove margin around div use star *
*{
margin: 0;
padding: 0;
}
but it is not clear if this is want you wanted.
The following should be added to your CSS file, browsers add a padding/margin to their view.
body,
html {
padding: 0;
margin: 0;
}
I'd also suggest that you make sure to follow HTML convention.
You currently have this:
<div id="header" class="top" >
</div>
You should clean up the spacing so that it looks like this:
<div id="header" class="top"> <!--Notice that I cleaned up the spacing here -->
</div>
I have a simple image that has a size attribute added using CSS.
I decided to make the image clickable by adding a <a> tag hoping nothing will change. But the whole image has been reset and i cant change the size without removing the <a> tag.
HTML
<header><img src="images/logo.png" alt=""></header>
CSS
header img {
width: 100%;
height: 50%;
}
Additionally, another React project is having the same issue:
// the css for "catImg"
const useStyles = makeStyles(theme => ({
catImg: {
"&:hover": {
boxShadow: "10px 5px 5px black;",
backgroundColor: "blue",
}
}
}))
.
.
.
<ImageListItem className={classes.catImg}>
{/* <a> */}
<img
src={url}
key={cat.token_id} />
{/* </a> */}
</ImageListItem>
EDIT:
Putting the a tag outside the ImageListItem makes it work correctly.
// the css for "catImg"
const useStyles = makeStyles(theme => ({
catImg: {
"&:hover": {
boxShadow: "10px 5px 5px black;",
backgroundColor: "blue",
}
}
}))
.
.
.
<a href="something">
<ImageListItem className={classes.catImg}>
<img
src={url}
key={cat.token_id} />
</ImageListItem>
<a/>
The quick response is because yow styles said that them images inside yow header are going to have this styles
header img {
width: 100%;
height: 50%;
}
The problem is in your html. Html has rules AND one of them rules is that block tags should not be in side of inline tags
header tag is a block tag a is inline
If you want to override that rule in your css you need to specify that a tags are block tags as well with
a {
display: block;
}
You have to reference the a tag instead of the img
header a {
width: 100%;
height: 50%;
padding: 0;
margin: 0;
}
header a img {
width: 100%;
height: 100%;
}
Your img is being set to 100% width of its parent, and 50% width of its parent. It's possible, that if you add the a tag, and the a element's width and height are not what you expect, that you'd see a change in behavior. But out of the box, without other styles applied, it shouldn't change anything.
For instance, this vanilla code, shows no difference in img sizing with or without the a element.
header img {
width: 100%;
height: 50%;
}
<header><img src="https://placekitten.com/150/150" alt=""></header>
<a href="#">
<header><img src="https://placekitten.com/150/150" alt=""></header>
</a>
It's hard to say why your problem arises without knowing the styling of the other elements. So I am guessing that the display property is at fault here. The default display property of an <a> tag is display:inline while the header has the default display property of display:block. display:inline will not fill the parent horizontally but display:block does. I will show you in a code snippet example:
.wrapper
{
width:400px;
height:200px;
background:green;
}
.case1
{
background:red;
}
.case2
{
background:yellow;
}
.case3
{
display:block;
background:orange;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header class="case1" ><header> display:block (default)</header>
<a class="case2" ><a> display:inline (default)</a>
<a class="case3" ><a> display:block</a>
</div>
</body>
</html>
So as you can see the parent of your image differs when you changed tags. The yellow area (case 2) is the same as you have now, in your case the <header> inside will be the same width as the <a> since it will not grow outside its parent. What you could try is to give your <a> tag the same display property as the header would have. Shown in case 3 with the orange background.
CSS property behaviour
You cannot change an element's height unless the parent's height is defined. Since you didn't share all the relevant code, I'm assuming you didn't set any rules for the header.
In this case, all you need to do is specify a height property on header and you're good to go.
If you already did, then you should share all the relevant code, because I wasn't able to reproduce your problem.
Note: If you don't I'll have to flag this question for the lack of information, because it cannot be answered in it's current state!
I checked the problem you mentioned but I did not encounter any bug, please tell me more about your problem if my code does not solve your problem.
<html>
<head>
<title></title>
</head>
<style>
a header img {
width: 100%;
height: 50%;
}
</style>
<body>
<a href="#">
<header>
<img src="img1.jpg" alt="">
</header>
</a>
</body>
</html>
i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.
I cant get them 4 images to line up in a row.
I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?
Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.
greeting Queen
.navbar {
max-width:960px;
text-align:center;
}
.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
<body>
<div class="navbar">
<div class="navbar-special">
<ul class="nav">
<li class="home"><img src="http://i.imgur.com/GryNQfZ.png" /></li>
<li class="search"><img src="http://i.imgur.com/NfURGQL.png" /></li>
<li class="logo"><img src="http://i.imgur.com/sIwbaop.png" /></li>
<li class="partner"><img src="http://i.imgur.com/Ry9hIzC.png" /></li>
</div> <!-- div closing navbar -->
</div><!-- div closing navbar -->
</body>
http://jsfiddle.net/n32koz7q/1/
As it applys to styling, there are a few caveats which make putting styles in an index.html or an external stylesheet different.
Putting styles in an external stylesheet will (everything else held constant)...
—create a new HTTP request, and the external style sheet will be loaded after the index.html page (given that this page requests the stylesheet).
—change the order at which styles are applied. For example, if you have.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello world!
</body>
</html>
<style>
.body {color:black;}
</style>
and mystyle.css:
body {
color: white;
}
the body would have a css property of color:black, since that style was loaded last. You can read about this here.
There are a few other differences, but these are probably the ones that are particular to your current use case.
As for your original question: here is an updated fiddle:
http://jsfiddle.net/n32koz7q/2/
You had a lot of unnecessary styling. I would start here, and then build up. Basically, the most basic CSS that your are going to use to get elements to sit inline, in this case, will look like so:
.navbar {
max-width:960px;
text-align:center;
}
li {
display:inline-block;
padding: 10px;
}
Essentially you just want those li elements to sit inline.
Good luck!
Just add the following code:
.navbar-default {
background-color:red;
}
This should get you going.
This CSS works on firefox and chrome, but for some weird reason it wont work on IE =(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>I hate u, ie :p</title>
<style>
header>nav, main, footer>nav {
max-width: 500px;
padding: 0em;
margin: 0em auto;
}
header, footer { min-width: 100%; background-color: #c0c0c0;}
main { background-color: yellow; }
main>section, main>aside { display: inline-block; }
main>section { background-color: aqua; }
main>aside { background-color: pink; }
</style>
</head>
<body>
<header>
<nav>
<ul><li>Header is centered =)</li></ul>
</nav>
<nav>
<ul><li>Header (nemu 2) is centered =)</li></ul>
</nav>
</header>
<main>
<section>
<h1>Why IE won't center me?</h1>
</section>
<aside>
<p>Stackoverflow: please help me</p>
</aside>
</main>
<footer>
<nav>
<ul><li>Footer is centered =)</li></ul>
</nav>
</footer>
</body>
</html>
I'd appreciate it if you help me fix this, preferably without adding/removing elements. I'd like to keep the current semantic if possible. If not, o well...
It is worth to mention that if I do something like <main><div>...</div></main> and add main>div { margin: 0em auto;} IE (and all other browsers, as expected) center main's content. But like I mentioned, I'd like to not break the semantics.
IE does not support the main element. To get it to work, however, you can just set main { display:block; } and it will work. This is a similar fix to the other new HTML5 elements, such as section and nav, which weren't supported but could be added by just adding that CSS.
As I don't have enough reputation, I post my idea as an answer:
My guess is, that you have to add position: relative; for your .main.
Browsers have a default.css with default values for keys you didn't set. I think (but didn't check) the IE has different std-values than other browsers. That could cause problems.
The main element is not supported in IE:
MDN
caniuse
Which I believe means there is no default styling for the main element, so you will have to add it. Most reset stylesheets will do this for you for the newer, more semantic elements.
Add display: block to your CSS selector for main and it should work.
main {
display: block;
max-width: 500px;
margin: 0 auto;
}
I have the code below to display the image and the code as a hyperlink. But I would like the image placed behind the text and person can click on either
<h1>test</h1> <img scr="#"/>
Use CSS to achieve this:
test
Here you can see more info about background-image: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
You have syntax error in your code, you must use <h1> outside the <a> tags, like this:
<h1> test </h1>
You can also use position: absolute so the text will be on the top of the image.
HTML
<a href="#">
<h1>test</h1>
<img src="http://spi3uk.itvnet.lv/upload2/articles/54/542197/images/Jauka-vasara-8.jpg"/>
</a>
CSS
a {
position: relative;
}
a h1 {
position: absolute;
z-index: 100;
color: #FFF;
}
Demo Fiddle
I recommend you to use background:
<h1>test</h1>
But if you want, you can use another variant (negative margin):
<h1 style="height: 24px;">test</h1><img style="margin-top: -24px;" src="..."/>
Or absolute position:
<h1 style="position: absolute; z-index: 9;">test</h1><img src="..."/>
P.S. You have some typos in code: scr -> src and <\h1> -> </h1>
Well, it depends how you'd be using this.
Either set is as a background image instead of adding an img-tag.
But that would mean you'd have to set the height. Otherwise your image would crop.
...or you can set the (wouldn't use h1 in this case for semantic reasons) span with the text to:
CSS
span {
display: block;
position: absolute;
}
and then position it wherever you want inside the image.