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;
}
Related
I've tried to do some basic CSS, but I'm having issues putting the title beside the logo image.
Here is an image of my code:
I've used display:inline; to raise the text, but then I can't change it afterwards. The height is locked and it won't seem to cooperate.
So help?
Tian, you may try to add
display: inline;
to both #header-image and #logo.
it will solve your problem.
Here is a quick re-write of the nav bar. You can try to alter it to fit yours, and throw an image in there to see it. May have to justify/move where you want your text in relation, but at least this gets it right next to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</Title>
<link rel="stylesheet" href="teststyles.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="img">
<img src="">
</div>
<div class="logo">
<h1>Text</h1>
</div>
</div>
</div>
</body>
</html>
CSS:
.nav {
display: flex;
}
.img {
display: flex;
}
.logo {
display: flex;
}
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'll do my best to explain the issue. I created a fiddle with the code. https://jsfiddle.net/caoz7sn2/
I'm trying to place a div on top of a div which I accomplished, but the issue is when you resize the screen, the div with the position:absolute doesn't move relatively with the others which is obvious because it's set absolute.
<!DOCTYPE html>
<html>
<head>
<title>404Vanity</title>
<script src="http://localhost:35729/livereload.js"></script>
</head>
<body>
<div class="header">
<img class="logo" src="images/logo.svg">
<div class="navbar">
<ul>
<li>Work</li>
<li>Vision </li>
<li>Contact </li>
</ul>
</div>
<div class="goldbar"></div>
</div>
<div class="itemList">
<div class="item">
<img src="images/shopashop.png">
<div class="overlay"></div>
<div class="title"><h2>Shopashop</h2></div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
the div class="itemList" is suppose to be placed exactly on top of the goldbar div.
I'm not too sure if this is exactly what your going for. But the reason that the divs aren't lining up right is because the gold bar has that margin: 0 auto. That's telling it to always remain centered on the page.
Then you have your .itemlist, which is being told to be positioned 30% from the left of the page at all times, regardless of browser width.
If your trying to center your itemlist, I would doleft: 0; right: 0; margin: 0 auto; on the absolute elements.
Fiddle: https://jsfiddle.net/caoz7sn2/2/
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">
I am looking to increase the size of the header of a jquery mobile app. When I do that I need the title to be centred. I found that I can add a line like:
line-height: 30px;
to the css, but that is just far to much of a hack. I assume there must be a better way to do it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css"><!--
.ui-header {
height: 50px;
}
-->
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>This Needs To Be Centred Vertically</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The easiest way to vertically center text of a block element is by making the line-height the same as the height of said element. Note that this will only work if you have a single line of text.
line-height: 30px;
height: 30px;
On an inline or table-cell element, you could use vertical-align: middle to achieve the same effect.
Also note that forcing display: table-cell on an element will not work in IE6-7.
In your case, I would suggest going with the line-height/height technique.
You may try with
display: table-cell;
vertical-align: middle;
in your CSS.
You could try something like this:
<div data-role="header">
<div class="ui-bar">
<h1>This Needs To Be Centred Vertically</h1>
</div>
</div>
Doc: http://jquerymobile.com/test/docs/toolbars/docs-headers.html