I am trying to center some text within a banner (classic question I know). This banner is split into 12 columns, and there is a cross icon for closing the window in the left-most column. The text is centering in the available space between the cross icon and the end of the banner, rather than centering within the whole banner width. From the way the code is written I cannot see why it would be doing this. Here's the HTML:
<div class='col-xs-12 banner'>
<a class="navbar-brand cross-link" href="" ng-click="close()">
<img class="cross" src="/components/cross.png" alt="close">
</a>
<h1>{{title}}</h1>
</div>
with CSS:
.banner {
height: 70px;
background-color: red;
h1 {
color: white;
text-align: center;
}
.navbar-brand {
&.cross-link {
padding: 0px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 29px 28px 27px 28px;
}
}
}
When I inspect this on Chrome, the h1 is quite happily sitting within a full-width container as expected, but the image appears to be shifting it across so that it doesn't center properly. Can you see how to resolve this?
Thanks
You could set the .cross-link to absolute position. Remember to set the container position property to a value different from "static":
.container{ position: relative; }
.cross-link{ position: absolute; left: xxxx; top: xxxx; }
What you are missing is a closing } at the end of your .banner block OR at the end of the css you shared.
Related
I am trying to do a project for my uni.
I would like to make a padding on my anchor to make them clickable.
#windows is a div that contains everything (maybe it could be substitute with a *?)
I chose the padding just with trying, but I'm not satisfied.
As you can see the logo is not centered because the padding changed the height of the banner (the grey part)
body {
margin: 0;
background-image: url("../img/background.png");
background-repeat: repeat;
}
#windows {
width: auto;
height: auto;
width: auto;
}
#banner {
height: 100%;
width: 100%;
background-image: url("../img/banner-background.png");
display: flex;
}
/*#banner p {
font-weight: bolder;
color: #1ea2c4;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
} */
#logo {
height: 50px;
width: 50px;
margin-left: 50%;
height: auto;
}
#logoutandcart {
margin-top: 1px;
margin-right: 30px;
margin-left: auto;
}
#logout,
#cart {
width: 50px;
margin-right: 5px;
width: fit-content;
float: right;
display: inline;
padding: 20px 5px 20px 5px;
}
<div id="window">
<div id="banner">
<div id="logo">
<a class="forwarder" href="home.php">
<img src=" ../img/nftlogo.png " alt="banner logo ">
</a>
</div>
<div id="logoutandcart">
<a class="conteiner" href="./login.php ">
<div id="logout">Log out
</div>
</a>
<a class="conteiner" href="./cart.php ">
<div id="cart">Carrello </div>
</a>
</div>
</div>
First lets discuss a few issues. If you use an ID of window then a selector of #windows your css will not work. Ensure that your ID and selectors always match. In this case it is ok because the width and height auto are not needed. Next there is no need to place a div inside of an a tag to contain your text. If you need to separate text in an a tag use a span. In this case it is not needed so Ill just remove it.
Next lets talk about a solution. You can use the header tag with a div inside that acts as a container. Place your banner background on the header tag and use the container to keep your banner centered when your screen becomes larger you can place a width on the container then use margin 0 auto to make it stay in the center and not go edge to edge. We can also make that container have a position of relative and a display of flex and control the space around the objects inside using the height. Align the items to the center and justify the content to the end of the flex object. This will only affect to two end links because we will do something different with the logo.
Since we always want the logo in the center we will give it a position of absolute. This will take it out of the "normal flow" of the document and allow us to place it where we want. In this case it will be to the top and left 50% of its closes relative parent the header-container. Then we will translate the object -50% of its height and width to center it within its parent.
Padding can then be added to the links on the right to separate them and make them a bit taller making them easier to click on.
Now you can change the height of your banner as you see fit and the objects inside will respond to their parents height and width.
body {
margin: 0;
}
.app-header {
background-color: #e6e6e6;
}
.header-container {
position: relative;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.link-container a {
padding: 20px 5px;
}
#media only screen and (min-width: 800px) {
.header-container {
width: 800px;
margin: 0 auto;
}
}
<header class="app-header">
<div class="header-container">
<a class="logo" href="home.php">
<img src="https://via.placeholder.com/50" alt="banner logo ">
</a>
<div class="link-container">
Log out
Carrello
</div>
</div>
</header>
I'm actually trying to fix an image to a div with text on it regardless of the screen resolution the user may have.
So the image doesn't move and stays fixed in that div.. forever
On Html:
<div class="config">
<img id="uC1"></img>
<div class="config-title">Settings</div>
</div>
On Css:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative; }
#uC1 {
background-image: url(/images/tinta2.png);
width: 32px;
height: 23px;
position: absolute;
top: 5%;
left: 60%; }
The problem is, when neither using % nor px on top and left, other screen resolutions moves the image.
I've already tried to play with the #media (min-width: 575px) {} options and thats working but then will need to fix the position in all the widths, and maybe there's a better and much simple solution that i don't know
I'm aware that creating an image with the div's content plus image will do the thing but i want to be able to change the text eventually
And sorry if i type like yoda, but remember:
In a dark place we find ourselves, and a little more knowledge lights our way.
From the comments, it looks like you are just wanting your icon before your text. In this case, I would use a pseudo element before the actual text:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative;
line-height: 23px; /* same height as your image (unless your font size is larger, then make it the same size as your font */
}
.config-title:before { /* this will place a pseudo element at the beginning of the config title div */
content: '';
display: inline-block; /* make it inline block so it appears before the element and is centred with it */
background: url(/images/tinta2.png) top left no-repeat;
background-size: contain;
width: 32px;
height: 23px;
margin-right: 10px; /* spacing to your text */
vertical-align: middle;
}
<div class="config">
<div class="config-title">Settings</div>
</div>
If I understand the question correctly, you can achieve this with the position attribute.
position: absolute will be positioned relatively to the container div with position: relative. If you want to place in the top left corner, you can use top: 0; left: 0.
Working JSFiddle
.container {
position: relative;
display: inline-block;
margin: 15px;
height: 200px;
width: 200px;
border: 2px solid red;
}
.container--image {
position: absolute;
left: 0;
top: 0;
}
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
I often have this problem with a lot of fixed navbars i.e. when I have a fixed navbar, how do I give the element below it some margin, so that the fixed navbar is not covering that element?
I was just wondering if there is a more elegant way of doing this apart from the <br> tag and margin-top.
The sample code would be like:
HTML code :
<nav>
I AM NAVBAR
</nav>
<br><br>
<div>
</div>
CSS code :
* {
padding: 0;
margin: 0;
}
nav {
height: 50px;
width: 100%;
background: #444;
color: #fff;
text-align: center;
font-weight: bold;
font-family: verdana;
position: fixed;
top: 0;
left: 0;
}
div {
height: 500px;
width: 100%;
background: tomato;
}
Fiddle here.
Fixed position relatives to the screen's viewport. You can just set top margin or padding on the body tag, and make the value >= the navbar height.
body {
margin-top: 50px; /*or padding*/
}
http://jsfiddle.net/5k5mxcn1/1/
There's a theory in CSS that you only apply bottom margins.
http://csswizardry.com/2012/06/single-direction-margin-declarations/
So to keep things modular, you could create a wrapping class:
<nav class="nav__wrapper">
<div class="nav__content">
Navigation
</div>
</nav>
<p>Text content</p>
css:
.nav__wrapper {
height: 30px;
margin-bottom: 10px // breathing room
}
.nav__content {
background: #dadada;
height: 30px;
line-height: 30px;
position: fixed;
width: 100%;
}
fiddle: http://jsfiddle.net/wv53qLwz/
A fixed element is position relative to the viewport, meaning it stays at the same designate spot and does not leave a gap in the page where it would normally have been located.
You can apply a top margin to the element that is directly following the fixed element.
div {
margin-top: 50px;
}
However, I've found out that using the scroll-margin property does the trick. It's explained better here https://css-tricks.com/almanac/properties/s/scroll-margin/#aa-enter-scroll-margin
div {
scroll-margin-top: 50px;
}
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
I'm trying to learn HTML/CSS and JavaScript+jQuery by using Codeacademy and working on my own little project to practice. However, I am stuck with a very simple problem:
I want a parent div to be displayed across the entire page. I can do this successfully (see fiddler). When I resize the browser screen, however; my parent div no longer fits across the entire page, which causes its right most child div to be displayed outside of the parent div (see fiddler). Basically, I want my parent div to always wrap its child divs, and to always be displayed across the entire screen.
Fiddler Links:
Link 1
Link 2
Relevant HTML:
<div id="topnav">
<a id="logo" class="navlink clearfix">DreamTeam</a>
<a id="logo" class="navlink clearfix">Strikers</a>
<a id="logo" class="navlink clearfix">Midfielders</a>
<a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a>
<a id="logo" class="navlink clearfix">Goalkeepers</a>
</div>
Relevant CSS:
/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}
#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}
#lastlink {
border: none;
}
/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto;
font-size: 24px;
text-align: left;
line-height: 65px;
width: 175px;
border-right: 1px solid #bdbdbd;
}
Any help would be appreciated. I've gone through many Google searches and other stackoverflow posts, but nothing seems to work for me unless I completely missed an appropriate post. Using things like "overflow: hidden" or creating a wrapper div didn't really work for me. Thank you in advance for any suggestions. It would be great if anyone could point me to an appropriate post that I might have missed too.
How about get rid of the div tag inside a tag. Because you can use class with a tag.
Look at the following example provided by StackOverflow user starx
CSS
a.divlink {
display:block;
width:500px;
height:500px;
float:left;
}
HTML
<div>
<a class="divlink" href="yourlink.html">
The text or elements inside the elements
</a>
<a class="divlink" href="yourlink2.html">
Another text or element
</a>
</div>
Click here for more details
I managed to find a solution to my problem. The problem was not my invalid markup; it was actually the CSS for my #topnav ID. Here's how I changed that ID to get the result I wanted:
#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
The key changes are below the height property.