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;
}
Related
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;
}
Here is HTML Code
<!doctype html>
<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="Font Sizes.css">
</head>
<body>
<div class="First">
<img src="firstImage.png" alt="First Image of Article" class="FirstImage">
<p> Picture No.1</p>
</div>
<div class="Second">
<img src="secondImage.png" alt="Second Image of Article" class="SecondImage">
<p>Picture No.2</p>
</div>
</body>
Here is CSS
.First{
width:430px;
background-color: Red;
float: left;
}
.Second{
width:330px;
background-color: Blue;
}
I tried different tricks but failed. Please Explain it in detail. I searched a lot but could not found my answer.The second element not arrange it self to the right side of first element. When i remove the width property from second element then it arranged at right.
With Width property:
Without Width Property on second element:
div's are block level elements and you have only supplied a float on First. Putting a float on Second will give you the effect you desire IF the browser is wider than 760px;
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
I have a div (with a fixed width) that has 2 image elements as children.
Each image is the same width as the div so the images are placed not on the same row (see screenshot) .
This is great, but I want the images to displayed the same way (one on top of the other) but at the bottom of the div.
I'm able to achieve such behavior in some browsers using:
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
on the div css.
Is there a nicer way to achieve that?
Here is the code I used for the example:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;
width:33px}
</style>
</head>
<body>
<div class="container">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div>
</body>
</html>
Make the container position:relative; and set the images to position:absolute; bottom:0;
However, this will not stack the images. They will overlay each other. If you need them stacked, the easiest (dynamic) way is to wrap the images with another container (like a div), and then set the styles on it. For example...
Markup:
<div class="container">
<div class="innerContainer">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
</div>
</div>
CSS:
.container {
background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;
height:116px;
width:33px;
position:relative;
}
.container .innerContainer {
position:absolute;
bottom:0;
}
The solution: Add an innner div and set its position to bottom:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative;
width:33px;}
.inner {position:absolute;bottom:0px;}
</style>
</head>
<body>
<div class="container"><div class="inner">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div></div>
</body>
Thanks to Josh for suggesting this.