I have to design a site with a frameset.
I want to make one frame with the main page and another with a menu on the right. But framesets are ugly most times, aren't they? So I want to define a background image for a wrapper div and a little border on the left in #4e4e4e to make it a bit nicer. But this doesn't work. I don't see any image even though it seems to be embedded correctly.
And can you tell me how to do that thing with left grey border? I thought of a left border for the wrapper but I am not sure.
Thanks!
<style>
#wrapper {
background-image: url(../img/rook/img/fever.jpg);
background-color: #4e4e4e;
width: 500px;
height: 200px;
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div id=wrapper">
<ul>
<li>Main</li>
<li>History</li>
</ul>
<br>
<!--...-->
</div>
<div id = "wrapper">
...
</div>
You're lacking a quotation mark around the ID "wrapper"
it should look like this:
<body>
<div id="wrapper">
...
</div>
</body>
<div id=wrapper">
just correct this line to
<div id="wrapper">
Related
I'm trying to make this image a href, its like this because I couldn't figure out how to have the image align with the menu on the right. But now I'm trying to make the logo go to the front page, I have tried making the code <div class="wrapper"> <div href="index.html" class="picture1"></div> but that doesn't work. Any ideas how to fix this
div.picture1 {
width:153px;
height:60px;
background-image:url('Carlsberglogof.png');
<div class="wrapper">
<div class="picture1"></div>
enter image description here
You can replace your div with an anchor tag. I added the green colour so you can see it.
a {
display: block;
width: 153px;
height: 60px;
background-image:url('Carlsberglogof.png');
background-color: green;
}
<div class="wrapper">
</div>
You could use JavaScript, for example:
<div onClick="location.href='/index.html'"> ...
...or simply wrap the whole element in an <a> tag:
<div class="wrapper">
<a href="index.html">
<div class="picture1"></div>
</a>
</div>
New here, I am making a web page for a school project and am having trouble getting the layout the way I want. was wondering if someone could point me in the right direction.
I am creating a layout. The top of the page is the navigation, then I have one main large image with some content over lay, and under that I have an image with content overlayed on the left and the right, then at the bottom the footer. * or thats what I would like anyway.
I have tried putting the images each in a but I can only get them to either be in a column or stacked. As I would like the first image under the header with navigation to be a wider picture , then two smaller ones each half the width of the main wider image if that makes sense..
I have searched online and the only things that looks similar to what I'm trying to accomplish are pay for templates.
<section>
<div class="container">
<img src="thebean.jpg" />
</div>
</section>
<section>
<div class="container">
<img src="rooftops.jpg" />
<div id="topleft"></div>
</div>
</section>
<section>
<div class="container">
<img src="thebean.jpg" />
<div id="topright"></div>
</div>
</section>
I'm not really sure if i got your question right without a figure that help me figure out the layout you are looking for.
Give a look at this picture and tell me if i got it right or not!
Layout testing
Here is the simple code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title>Testing</title>
</head>
<body>
<div id="largerPanel">
<img src="https://i.pinimg.com/originals/aa/49/54/aa4954451f16847cb657e68e5f46538a.jpg">
</div>
<div id="floatPanel" class="halfPanel">
<img src="https://i.ytimg.com/vi/fB8MYCGFqC0/maxresdefault.jpg">
</div>
<div class="halfPanel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8nIMQ30DM-OKazFBcLM4m9kq3_fzph-eBoiax6M88O5nncGyB">
</div>
</body>
</html>
Test.css
body{
width: 100%;
height : 100%;
}
.halfPanel{
width:50%;
height: 20%;
}
.halfPanel img{
width:100%;
height:100%;
}
#floatPanel{
float:right;
}
#largerPanel{
width: 100%;
height: 20%;
}
#largerPanel img{
width: 100%;
height: 100%;
}
If i got it wrong please post a simple paint image with some boxes that show the layout you want, i will be happy to help you through this!
I require help. My problem is that, I try to move all my text and images to one side of the webpage and leave the navbar. However my navbar is moving along with the text. I will put my code below.
The Problem-
i.stack.imgur.(com)/rLIjl.(png)
Html-
my html
CSS-
my css
Try the css rule:
ul.navbar { position: static }
It's not clear what you want to achive but I think you are trying to put the navbar and the text side by side. In order to do that you can use:
<div style="float:[right/left];">
<!-- your content -->
</div>
to make your content float to the right or to the left. In this case, this could be a possible solution for your problem:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova-css.css">
</head>
<body>
<div style="float:left;">
<img src="img.jpg" style="width:191px;height:158px;">
<ul class="navbar">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div style="float:right; width:70%;">
<h1>Title</h1>
<p>Welcome to Shoe Nation!
<p>(This site is currently under construnction)
<adress>Something</adress>
</div>
</body>
</html>
CSS
body {
padding-left: 11em;
background-color:#FAEAD3;
color:#FF3B3F;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 50px;
}
I have a webpage where the contents are centered. It has lot of css and js jinja2 template. When I add a simple div tag
<div class="container">
<!-- something -->
<div>hello</div>
The message is centered too. I tried to change few things but I'm afraid it might it affect some other page too. So I would like to know whether I can force this div tag to get left aligned . I tried 'float=left' is not working. Is possible override all other setting just for this one <div> tag?
The page layout is like
Space |text stats here| Space
|text2 |
And expected result:
Space |text stats here| Space
|text2 |
hello
DEMO:
http://cssdeck.com/labs/wnfmebyb
Code
<title>test</title>
<body class="">
<div class="container">
<h2> Center Header </h2>
centered text
<br/>
<div style="float:left"> Wanted this on left </div>
</div>
<div style="float:left"> Expected output: LEFT </div>
</body>
css file:
.container {
width: 740px;
margin: 40px auto;
text-align: justify;
}
add an id to the particular div so you don't have to override any other settings like this -
<div class="container">
//something
<div id="some_id">hello</div>
than add CSS
#some_id{
text-align: left !important;
}
Looks like I need to provide 'absolute position' something like below seems to work:
<div class="movethis"> Wanted this on left </div>
.movethis{
position:absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Result : http://cssdeck.com/labs/4rtflvmy
If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire