I've got 2 views, one for logged in and one for logged out. The logged out view I think is OK:
When logged in, the components do not align properly, as can be seen the user picture displays too far to the left:
Can you tell me what I need to do to achieve more aligned graphics? I think the user picture and the logo should be aligned the same. The code is:
<div id="header">
<a id="logo" href="/" name="logo"><img src="/_/img/kool_business.png" height="80"
title="Koolbusiness.com" alt="Koolbusiness.com" /></a>
<div id="page_name" class="ctext1">
<div class="ctext2">
<div class="ctext3">
For sale
</div>
</div>
</div>
<div id="line"></div>
</div>
<div id="container_main">
<div class="navbar">
<div style="float:left; margin-top:6px;">
<img src=
"https://graph.facebook.com/327400016/picture?type=small" /><a href=
"/user/niklas-rosencrantz">Niklas Rosencrantz</a><span style=
"color:#99ccff"> | </span>Home<span style=
"color:#99ccff"> | </span> <a href="/ai">Insert
ad</a><span style="color:#99ccff"> | </span> <a href=
"/tamil_nadu">Search for ads</a><span style=
"color:#99ccff"> | </span> <a href=
"/li?t=w">Wanted</a><span style="color:#99ccff"> | </span>
Log out
</div>
</div>
</div>
Should I just remove the style:"float:left; margin-top:6px or what do you think I should do the present the layout smoother? The CSS for my page is
#header {
margin-left: 26px;
margin-top: 16px;
width: 790px;
height: 70px;
}
#logo,
#page_name {
float: left;
height: 50px;
}
#page_name {
font-size: 14px;
vertical-align: middle;
width: 250px;
}
#logo { margin-right: 26px }
.navbar {
margin: 5px 0 10px -7px;
overflow: hidden;
}
.navbar a,
.navbar a:visited,
.navbar a:link {
margin-top: 5px;
margin-left: 8px;
margin-right: 8px;
font-size: 14px;
color: #336699;
text-decoration: none;
}
.navbar a:hover { text-decoration: none }
.navbar a:active { text-decoration: underline }
Thanks in advance for any answer or comment
Put the image inside the anchor tag for the name rather than outside it.
You have margin-left: -7px on .nav and then counter-act it with margin-left: 8px on the anchor tags inside the nav div, but never do so with the img.
Can you get rid of the -7px left margin in .nav or do you have it there for another reason?
Related
I don't know how to describe this problem. I'm using three styling frameworks Bootstrap, Semantic, and Materialize CSS. I've created an unordered list after that there is a button when I use the br tag to separate them separation works but the gap doesn't fill with the body background color so I used margin but still, the gap is not filling with body color.
You can see this problem in this
HTML code
<section>
<div class="container dashboard ">
<div class="row">
<aside class="col-sm-3">
<ul class="list-group text-center">
<a class="list-group-item active" href="#">Dashboard</a>
<a class="list-group-item" href="#">All Posts</a>
<a class="list-group-item" href="#">Create/Edit Posts</a>
</ul>
<a class="btn btn-light btn-block" href="#"> <i class="fa fa-power-off"></i> <span class="text">Log out</span> </a>
</aside>
</div>
</div>
</section>
CSS
.dashboard{
margin-top: 100px;
margin-bottom: 100px;
padding: 30px 0px;
}
.dashboard .col-sm-3{
border-bottom: none;
border-radius: 5px;
height: fit-content;
padding-left: 0;
padding-right: 0;
background: #fff;
}
.dashboard .col-sm-3 ul a{
text-decoration: none;
font-weight: 500;
}
.dashboard .col-sm-3 .btn {
margin-top: 50px;
}
.btn-light {
background-color: #fff;
border-color: #e4e4e4;
text-align: center;
}
.btn-light span{
text-transform: none;
font-weight: 500;
}
You can check this question this thing will help you link
Actually, this question helps me too I've also faced a similar situation.
I will make this more simple I think this work you can try this
br {
content: "A" !important;
background: #fafafa !important;
display: block !important;
width: 100% !important;
height: 30px !important;
}
I have translated an image up to go behind a div to make it fit the design, however it leaves a white space below it, where the original image would be. How would I go about fixing this?
This is for a website, I've tried translating the sitemap up however then there is even more white space below the sitemap.
HTML:
<div class="portfolioImage" id="images">
<div class="portLogoImages" id="myDIV5">
<img src="./resources/portfolio/logoportfolio/logoPortfolio1.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio2.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio3.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio4.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio5.png" alt="" class="portfolioImages">
</div>
</div>
<div class="sitemap portAdjustment"> <!-- SITEMAP -->
<div class="sitemapItems">
<img src="./resources/sitemapLogo.png" alt="" class="sitemapLogo" width="166.3px" height="22px">
<div class="links">
<p >Home</p>
<p>Products</p>
<p>Portfolio</p>
<p>About Us</p>
<p>Contact Us</p>
</div>
<div class="finePrint">
<p>X is a part of the family company X that specialises in custom made design ranging from logo design to apparel design.</p>
<p>X</p>
</div>
</div>
</div>
CSS:
.portfolioImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
}
.portLogoImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sitemap {
width: 100%;
height: 215px;
background-color: #f4f4f4;
padding: 30px 0px 30px 0px;
display: block;
text-align: center;
}
.finePrint {
padding-top: 70px;
color: #c8c8c8;
}
.sitemapItems {
padding: 0px 30px 0 30px;
display: block;
}
.sitemap a {
text-decoration: none;
color: #c8c8c8;
transition-duration: .2s;
display: inline-block;
padding-right: 4px;
}
.sitemap a:hover {
text-decoration: underline;
color: #434343;
}
I expect there to be no white space however there is still white space below it.
Just use margin-top instead transform
I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
color: black;
}
.navigation-bar {
float: left;
width: 350px;
font-size: 40px;
height: 100vh;
text-align: center;
}
.portfolio {
background-color: #909090;
height: 16%;
line-height: 16%;
}
.twitter {
background-color: #a0a0a0;
height: 16%;
}
.git-hub {
background-color: #909090;
height: 16%;
}
.email {
background-color: #a0a0a0;
height: 16%;
}
.linkedin {
background-color: #909090;
height: 16%;
}
.about-me {
background-color: #a0a0a0;
height: 16%;
}
</head>
<body>
<div class="navigation-bar">
<a href="#">
<div class="portfolio">
<h3>Portfolio</h3>
</div>
</a>
<a href="#">
<div class="twitter">
<h3>Twitter</h3>
</div>
</a>
<a href="#">
<div class="git-hub">
<h3>Github</h3>
</div>
</a>
<a href="#">
<div class="email">
<h3>Email</h3>
</div>
</a>
<a href="#">
<div class="linkedin">
<h3>LinkedIn</h3>
</div>
</a>
<a href="#">
<div class="about-me">
<h3>About Me</h3>
</div>
</a>
</div>
</body>
</html>
Thanks for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!
Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/
You need to remove the built-in margin from the heading.
JSfiddle demo
h3 {
margin: 0;
}
It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.
*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.
I have a few anchor tags in my html that for some reason aren't working. As far as I can tell there is nothing wrong with the code so I am completely at a loss. Maybe I need a fresh pair of eyes to look it over to see if there is something obvious that I am missing? This website is not loaded onto a server yet but here is the code I am having issues with.
<div id="navigation">
<div class="wrapper">
<div class="right">
<div class="phone-number">
<p>24hr Turn Around Time 1-877-229-9665</p>
</div>
<div class="social-media">
<img src="images/facebook.png">
<img src="images/twitter.png">
<img src="images/yelp.png">
</div>
</div>
<div class="left">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="text">
<p>Custom Made Orthotics</p>
</div>
</div>
<div class="navbar">
<nav>
HOME
SERVICES
COMPANY
CONTACT US
NEWS
</nav>
</div>
<div class="clear"></div>
</div>
</div>
#header {
font-family: calibri;
}
.text {
text-align:left;
font-size: 20px;
}
.navbar {
text-align: center;
font-color: #000000;
padding: 30px 20px 4px;
}
.phone-number {
text-align: right;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #000000;
height: 80px;
padding-top: 5px;
background-color: #ffffff;
z-index: 1;
}
#navigation a {
font-size: 20px;
padding-left: 5px;
padding-right: 15px;
color: #000000;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
.social-media {
text-align: right;
margin-top: 40px;
}
Fiddle, they seem to actually be working, as in they are all working links.
<div class="social-media">
<img src="images/facebook.png">
<img src="images/twitter.png">
<img src="images/yelp.png">
</div>
</div>
Ok so I had a co-worker fix this issue. changed the position to relative and added a z-index of 20. Now they are working!
I have created a design which is below
http://jsfiddle.net/g9TT7/1/
i want to put logo means below top and left side of the page
<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
here i want to put business name in the center of the page and logo will be on the left side of the page. I have set position absolute in my logo but not working.
Please help me to do this.
I hope you want something like this:
Demo
Add css float:left in your logo style and remove position absolute from business div.
You can also adjust position from top and left by playing with margin.
HTML:
<div class="b" style="text-align:center;">
<a href="index.html" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
<div class="business_name" >
Business
</div>
<div class="clear"></div>
</div>
CSS:
.clear
{
clear:both;
}
.img1{
margin-top:20px;
width:200px;
display:block;
float:left;
}
.business_name {
width: 78%;
font-size: 43px;
font-weight: bold;
float: left;
text-align: center;
line-height: 28px;
margin-top: 5px;
}
.b {
font-size: 25px;
font-weight: bold;
width: 78.5%;
text-align: left;
height: 50px;
margin: 0px;
color: rgb(67, 161, 240);
}
.img1 {
float: left;
margin: 2px 0px 0px;
width: 20%;
text-align: left;
border: 0px solid red;
}
Something like this? http://jsfiddle.net/ADDTn/
<div class="header">
<a href="#" class="logo">
<img src="img.jpg" />
</a>
<h1>Bussiness</h1>
<div class="clear"></div>
</div>
css
.header {
width: 100%;
height: 100px;
}
.logo {
display: block;
float: left;
}
h1 {
text-align: center;
}
.clear {
clear: both;
}
Assign the z-index value
<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block; z-index: 1;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
see this demo