I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
Related
Hi! I am trying to place two paragraphs inside a DIV (a Name and a Job Position) for a responsive site.
.header {
min-height: 56px;
transition: min-height 0.3s;
max-width: 800px;
}
.header__inner {
margin-left: auto;
margin-right: auto;
float: left;
border: 3px solid #73AD21;
display: inline;
}
.header__text {
float: right;
border: 3px solid #73AD21;
display: inline;
}
<header class="header">
<div class="header">
<div class="header__inner">
<img class="header__logo" src="logo.jpg" alt="Logo">
</div>
<div class="header__text">
<p class="header__title">
NAME
</p>
<p class="header__subtitle">
CURRENT POSITION
</p>
</div>
</div>
</header>
Whenever I start playing with different sizes of screen both paragraphs switch places randomly. How can I make sure that they will stay in order?
This is how the page looks
Page with misplaced texts
And this is what I would like to accomplish
what I want to do
It seems you didn't post the CSS for the two elements whose position you want to switch, header__title and header__subtitle. But apparently they are both floated right. To make sure header__subtitle is NOT displayed to the left of header__title even if there is enough space, you can add this:
.header__subtitle {
clear: right;
}
I am trying to get three images in a line within a div without spaces and have text display over each of the images that will click through to a different page. I understand the solution to this probably lies in the position of both elements but I cannot seem to get the text to stay over the correct image. If someone could help me with this that would be great?
Below is the HTML.
<div class="services">
<div id="text-overlay">
<img src="Untitled-5.jpg">
<p>Landscaping</p>
</div>
<div id="text-overlay">
<img src="Untitled-6.jpg">
</div>
<div id="text-overlay">
<img src="Untitled-7.jpg">
</div>
</div>
And the CSS:
#text-overlay {
position: relative;
}
img {
display: block;
width: 33.3333333333%;
float: left;
height: 250px;
}
#text-overlay p {
position: absolute;
top: 1%;
left: 1%;
background-color: firebrick;
color: white;
padding: 1%;
}
Any help would be appreciated. Is this the best way to do it or are there better alternatives?
Your code has few errors:First of all you should use unique ID for indivisual element.Secondly you should use background-image for these conditions.Refer here for more details.
If you want to overlay over image learn from here.
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I'm having a problem with placing the 'navigation' div (within 5 buttons) to the right side of the page in the '#header' div. The 'navigation' div is still next to the 'logo' div.
Can someone help me to get it to the right side of the page?
CSS code:
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML code:
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
There are multiple approaches to this, and you might have to experiment what works for you.
First of all, there's the position property, if you wanted to place the navigation to the right you'd get:
#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}
This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.
The other way, which may or may not work, again, is to use the float property
#navigation
{
float: right;
}
Do like this (use float & dont forget the clear in content div) :
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}
#content {
clear:both;
height: auto;
}
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}
adjust padding right and top px if u want....
You need to use float in navigation div and some width.
#navigation {
display: inline-block;
vertical-align: middle;
float:right;
}
Update this class and check it should work
Youri,
There are a few ways to accomplish this effect, here is one.
Take a look at this:http://jsfiddle.net/legendarylion/8jKUP/1/
THE HTML
<body>
<div id="header">
<div id="logo">
<!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
<img class="example-logo" src="images/logo.png" width="90px">
</div>
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
<nav>
<ul>
<li><!--add your image code back here-->Home
</li>
<li><!--add your image code back here-->Overons
</li>
<li><!--add your image code back here-->Product
</li>
<li><!--add your image code back here-->Media
</li>
<li><!--add your image code back here-->Contact
</li>
</ul>
</nav>
</div>
<div class="DivHelper"></div>
</div>
<div id="footer"></div>
</body>
</html>
THE CSS
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
#header {
position:relative;
border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
nav {
position:absolute;
top:0px;
right:0px;
border:1px dashed blue;
}
/*So what happened? The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner. Nav will stay there even if the parent container has more elements added to it.
Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls? That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/
/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
nav ul li {
list-style-type:none;
display:inline-block;
margin:0 10px;
}
nav ul li a {
text-decoration:none;
}
.example-logo {
height:50px;
width:50px;
background:blue;
}
What we're doing here is declaring a parent element relative, and the element you want styled in the top right corner absolute to that relation.
Also take a look in my comments in that code for some other ideas that I think might be helpful to you.
I used margin-left property like this:
#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}
The margin-left will create space out side of element. You can get the left side of element with enough space, then your element will be the right side of the page.
Reference:
https://www.w3schools.com/css/css_margin.asp
I am trying to align a small image (logo) next to a heading on my page, and I want these two items to be centered (ideally, the heading would be centered, and the image would be to next to the heading). However, no matter what I try, I can't seem to make it work. Here's a sample:
<h2>Headline</h2>
<img src="logo.jpg">
Now, I have tried a couple of things here. I have tried giving the h2 a div with an id, and the image a div with another id - then giving them set widths and floating them. This at least puts them on the same line, but not in a way I want to.
I also tried to wrap those divs inside another div, like so:
#container {
width: 800px;
margin: 0 auto;
}
#h2div {
width: 40%;
float: left;
}
#imgdiv {
width: 10%;
float: left;
}
That only seems to divide the page so that the header gets 40% starting from the left, and the image gets 10% after that. I tried experimenting with z-index: -1 on the image, and if I then use text-align: center, I can center the headling. But then I have to give the picture a position:absolute or relative, which doesn't work well if the user zooms in or out..
How do I solve this? How do I get either the headline centered, and the image to display right next to it (sort of anchored to the "end" of the headline), or have the two share the center?
how about something like this:
<div id="container">
<h2>Headline</h2>
<img src="logo.jpg">
</div>
#container {
width: 800px;
margin: 0 auto;
text-align: center;
}
#container h2, #container img {
display: inline;
}
and jsfiddle - http://jsfiddle.net/Ygz4t/
img is inline element, so you should assign text-align:center; to the parent block element. Assuming you have such markup:
<div id="imgdiv">
<img src="logo.jpg">
</div>
your CSS could be like following:
#imgdiv {
text-align: center;
}
1) Wrap the h2 and img within a div (lets call it as container) and make display: inline-block to show h2 and img in same line
2) Then using text-align: center
HTML:
<div id="container">
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>
CSS:
body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
text-align: center;
width: inherit;
}
h2, img {
display: inline-block;
}
JSFiddle
HTML:
<div>
<h2>Headline</h2>
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>
CSS:
h2, img {
display:inline;
}
h2 {
margin: 0;
line-height: 100%;
}
img {
vertical-align: middle;
}
DEMO
I think you are trying this,
HTML
<div class="out">
<div class="inline">
<h2>TEST</h2>
</div>
<div class="inline">
<img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
</div>
</div>
CSS
.out {
width: 800px;
margin: 0 auto;
}
.inline {
display:inline-block;
}
Updated JSFIDDLE
try this
<div id="center">
<h2>Headline</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>
Demo Fidle