I start to learn HTML and on my website in the middle of the top there should be a heading in the center. In the left top corner, there is a picture.
If I want to set the heading with align="center"; into the middle I can only set it into the middle between the right end of the picture and the right end of the Display...
I hope it's understandable and someone can help me!
The code is:
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 align="center" style="margin-top:15px; margin-bottom:20px;"><u>Peter Möhle</u></h1>
</p>
enter image description here
It should look like the Picture at the Bottom but this was made mith margin-left and isnt a fixed Position if i use another browser or display
I've updated your snippet as you are using deprecated tags. Happy to hear and clear your doubts, if you have any.
Ref: W3 CSS, W3 HTML
.nav {
width: 100%;
}
.logo-holder {
float: left;
height: 50px;
width: 100px;
}
.logo {
height: 100%;
width: 100%;
}
.nav-text {
text-align: center;
text-decoration: underline;
}
<div class="nav">
<div class="logo-holder">
<img class="logo" src="bilder/logo.jpg" />
</div>
<div class="nav-text">
<h1>Peter Möhle</h1>
</div>
</div>
You can use text-align: center; to centre text, but as mentioned in the comments you are using some deprecated tags.
<h1 style="margin-top: 15px; margin-bottom: 20px; text-align: center; text-decoration: underline;">Peter Möhle</h1>
It's even better to remove the style attribute and create a css file to put the styles in.
CSS
h1 {
margin-top: 15px;
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
}
I'd also change the div markup to
<div style="float: left; width: 600px; height: 152px;">
<img src="bilder/logo.jpg" style="height: 54px; width: 214px;">
</div>
I've used padding to the left now using relative value
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 style="margin-top:15px; margin-bottom:20px; padding-left: 50% "><u>Peter Möhle</u></h1>
</p>
Related
I've been stuck with the problem of trying to align all the content (logos, links and facebook icon) on my navigation bar to all be vertically centered. I've done some research and a good topic from StackOverflow came up, which can be found here: How do I vertically center text with CSS?
I've tried the suggested ideas all to no avail. I'm really at a loss with this one and would appreciate any help in making my navigation look good across multiple browsers (mobile devices also).
Another issue I've come up with is being able to add content in the main body of the webpage. As you can see in the codepen below, some of the content written in the body is hidden by the header. I can add line breaks to fix this but I'm 90% sure the way I've laid out my content (header, main, footer all enclosed in body tags) is incorrect.
CodePen
Here is what I've done to try and fix the problem: headerLeft refers to the logo to the left of the links, and headerRight is vice versa. The header tag had a class of verticalAlignHelper but it seemed to do nothing so verticalAlignHelper isn't really being used now.
.headerLeft {
margin-left: 30px;
margin-right: 40px;
float: left;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
.headerRight {
margin-left: 30px;
margin-right: 40px;
float: right;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
verticalAlignHelper {
vertical-align: middle;
line-height: 150px;
height: 150px;
}
Any advice is much appreciated. This is my first website so I'd appreciate if the advice was as basic as can be. Cheers.
Prevent covered-up body content
Use JavaScript to set a padding-top on body, just larger than the top height. Like so:
$("body").css("padding-top", $("nav").height() + 25);
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Navbar</nav>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
Fix vertical alignment of nav-bar images
Because I can't see the images, the following are only suggestions:
Easiest: Make the navigational bar the same height as the image (or vice versa)
Manually hard-code margins in (only if you know exact heights of everything)
Hardest but best Use JavaScript (dynamic and fun)
$(function() {
var elem = $("#img4");
elem.css("margin-top", (elem.parent().height()-elem.height())/2);
});
* {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
img {
height: 75px;
}
div.navbar {
width: 100%;
height: 100px;
background-color: lightgrey;
margin-bottom: 20px;
}
div.text {
line-height: 100px;
display: inline-block;
vertical-align: top;
}
img#img1 {
height: 100px;
}
div#div2 {
height: 75px;
}
div#text2 {
line-height: 75px;
}
img#img3 {
margin: 12.5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text">Uncentered image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img1" />
<div class="text">Centered by making image full height</div>
</div>
<div class="navbar" id="div2">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text" id="text2">Centered by making div same height as image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img3" />
<div class="text">Centered using manual <code>margin</code> manipulation</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img4" />
<div class="text">Centered using JS and jQuery (dynamic)</div>
</div>
I am trying to make a navigation bar in the top of my website and my logo appears but the "home" doesn't when i try to float left. What am I doing wrong?
When I make the site as small as it will go, it appears left of the logo, but I want it to be to the right.
<html>
<head>
</head>
<style>
body{
margin: 0px;
padding: 0px;
}
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
#logo-item{
float: left;
margin-left: 90px;
padding-top: 10px;
}
.menu-item{
float: left;
margin-top: -28px;
font-size: 110%
margin-right: 20px;
font-color: white;
}
.topBarItems{
}
</style>
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
</html>
Here is your code with a few edits:
<body>
<div id="topBar">
<img id="logo" class="menu-item logo-item" src="backflip-logo.png"><!-- Updated the class -->
<div class="menu-item">HOME</div><!-- Updated the tag placement to fall within top bar -->
</div>
</body>
Also edited your CSS a bit:
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
.logo-item{
float: left;
margin-left: 90px;
}
.menu-item{
padding-top: 10px;
float: left;
font-size: 110%
margin-right: 20px;
color: #ffffff;
}
.topBarItems{
}
But, instead of doing everything from scratch, you may just want to use a framework such as Bootstrap : http://getbootstrap.com
Here is a fiddle for it: https://jsfiddle.net/windrunn3r1990/fck4zsue/
There are several problems with this HTML
First you have the style tag between the head and body tag, it should go inside the head tag - which may cause strange behavior or simply not work depending on the browser
You are using a margin of -28px, which effectively moves the inner div above the outer div which in turn renders it invisible (as it is above the visible page).
font-color should be color
You can solve your issue by using display:inline-block; rather than floating components. https://jsfiddle.net/oxycm856/
HTML
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
CSS
#topBar{
width:100%;
background-color:#242424;
height: 63px;
}
#logo-item, .menu-item{
display:inline-block;
color:#fff;
}
I've been having an enormous amount of trouble for what I thought would be easy, but it's turning out to be much more difficult than I had anticipated.
I have an image alt="home" that I want to center in my footer, with text underneath it, but margin-left and margin-right: auto don't work, margin: 0 auto doesn't work either. Are there other options to center something?
And for the address, it's being pushed down because the width of the copyright and "home" img have a width the size of the footer. When I try to apply a width percentage to the div containing the home img and the copyright text, it disappears for some reason?
This is the result I want to achieve: http://i.imgur.com/khjrZow.jpg
jsfiddle (with complete html and css): http://jsfiddle.net/A2H3n/
If anyone knows what's going on, and can let me know, that would make me so happy... but really, I've spent 4 hours trying to fix this(I've just started learning CSS). Any help would be appreciated!
Relevant HTML:
<footer>
<div id="sociallinks">
<img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
<img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
</div>
<div id="logoandtext">
<img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
<p>© Hsien-Jin Martial Arts Studio<p>
</div>
<div id="contactinfo">
<p>7548 Mahogany Rd</p>
<p>Los Angeles, CA 97789</p>
<p>(444) 123-4567 </p>
</div>
</footer>
Relevant CSS:
footer{
overflow: hidden;
display: block;
margin: 0 auto;
color: #FFFFFF;
}
#sociallinks{
float: left;
margin: 0;
display: block;
width: 20%;
height: 100%;
}
.sociallogo{
width: 3em;
height: 3em;
}
#footerlogo {
width: 4em;
height: 4em;
margin: 0 auto;
}
#contactinfo {
line-height: 1.25em;
text-align: right;
}
display:inline-block; may be the answer:
footer{
text-align:center;
}
#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}
#contactinfo{
float:right;
}
Fiddle : http://jsfiddle.net/bonatoc/PLbae/1/
CSS overwrites are at the very bottom.
You can do it like this
Move the #contactinfo div above the #logoandtext
HTML
<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>
CSS
#logoandtext {
margin: 0 140px;
text-align: center;
}
#contactinfo {
float: right
}
i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.
I would like to know what the best way is to format the following layout:
(with eveything aligned and spaced neatly):
Here is the HTML:
<div class"wrapper">
<img alt="Image 1" src="images/image1.png" />
<div class="description">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
I tried the following but the vertical-align property does not seem to be working as I cannot align the top of the h1 with the top of the image:
img, div.description {
float: left;
}
div.description { margin-left: 10px; vertical-align: top; }
h1 { background: blue; }
p { background: red; }
What if instead of how the right hand side part is displayed below,
we wanted the right hand side to also be vertically centered instead
of being top aligned?
Here is the JSFiddle link:
http://jsfiddle.net/johngoche99/ZPKZj/1/
OK, to keep the text from dropping down below when the browser is resized it is necessary to specify the width of the wrapper element to something like 700px. Then it works.
Thanks.
in css you need to do this
img{
float: left;
height: 300px
}
div{
float: left;
}
h1{
padding: 10px;
background-color: #584480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
p{
padding: 10px;
background-color: #E24480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
nothing more ...
Hope this will help you ...
This can be accomplished with simple CSS.
img, div{
float: left;
margin: 10px;
}
http://jsfiddle.net/ZPKZj/2/
IRL, do NOT use this CSS. It is far too generic to be useful in any production environment. You might give your elements IDs or classes to allow the rules to be much more specific.
It looks you markup need a little change to be more, khm right;
HTML:
<div id="all">
<div id="sidebar">
<img class="side_image" alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div id="main">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
CSS:
#sidebar { float: left; }
#sidebar { margin-right: 40px; }
h1 {
margin-bottom: 30px;
margin-top: 0;
}
link to look how it will be:
http://jsfiddle.net/56Z7C/1/
I think you want something like this:
JSFIDDLE
You want to use css here. You will add an ID to the first div like <div id="wrapper"> this is your main div. Then in the second div you add <div id="headings"> for the headings. then in your css add the beneath code. (note: this isn't the best css code ever. but it works :))
html:
<div id="wrapper">
<img alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
<div id="headings">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
css:
#wrapper{
width: 960px;
margin: 0 auto;
}
#wrapper img{
float: left;\
margin-right: 40px;
padding-right: 40px;
}
#headings{
position: relative;
float: left;
}
h1{
margin-top: -5px;
}
Hope it helps!
Vertical-align only works on tables. If you want to do that with divs, you could try using display: table:
<div class="table">
<div class="row">
<div class="cell">
<img alt="Image 1" width="100" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div class="cell" id="stuff">
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</div>
</div>
</div>
And the CSS:
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
#stuff { vertical-align: middle; }
This has the advantage of not being dependent on sizes/margins of elements, but is unsupported in IE7 and below. As all things in life, display: table is a tradeoff.