I currently have a header div and inside of it, I have header-top and header-bottom. I am trying to place my logo on the top-header and align it vertically and horizontally. The logo aligns horizontally but vertically, it pushes aligns according to the body it seems and it brings the header down 20px. Here is my code.
HTML:
<body>
<div id="big-wrapper">
<div id="header">
<div id="header-top">
<img src="img/main-logo.png" />
</div>
<div id="header-bottom">
</div>
</div>
</div>
</body>
CSS:
#header {
width: 100%;
height: 160px;
box-shadow: 0 1px 4px 1px rgba(237, 237, 237, 1);
}
#header-top {
height: 130px;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
background-color: rgba(255, 255, 255, 1);
}
#header-top img {
height: 90px;
width: 255px;
display: block;
margin: 20px auto;
}
#header-bottom {
height: 30px;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
background-color: rgba(255, 255, 255, 1);
}
This is what I get
Suggestion. Could be wrong.
<div id="header-top">
<center>
<img src="img/main-logo.png" />
</center>
</div>
If wrong, try aligning the div as so.
Edit:
If all else fails, edit image, and offset it to desired alignment
Related
How can I make these forms in the middle of the page width
the Intended form
using pseudo elements before and after
and using this code:
<body>
<div class="cont">One</div>
<div></div>
<div>Three</div>
</body>
Note I am a beginner with CSS
You can try removing one of the content and see effect . Giving margin-top/bottom equal makes it vertically center align and display:block; with margin-left/right:auto makes it horizontally center
.box {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.content {
position: relative;
background-color: red;
border: 2px solid rgb(209, 208, 208);
border-radius: 5px;
width: 40%;
padding: 2%;
display:block;
margin: 15% auto 15% auto;
}
<div class="box">
<div class="content">hd</div>
<div class="content">hd</div>
</div>
Check this website on mobile you'll understand what I'm trying to do. This is my website
Notice how on the index on wix, the becomes display: block on mobile. I mean your success and the two other boxes.
I tried to do the same, it worked awfully on desktop when resizing the browser, but on mobile it didn't.
I have index_whitebox and index_whitebox_2 and index_whitebox_3
It goes like this:
CSS
.index_whitebox{
min-height: 380px;
width: 25%;
position: relative;
float: left;
margin-left: 6%;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
display: inline-block;
}
Same CSS with slight difference in the margin for the other two boxes.
As for media query:
CSS
#media screen and (max-width: 500px) {
.index_whitebox{
min-height: 0;
width: 90%;
position: relative;
float: none;
margin-left: auto
margin: auto;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
display: block;
}
}
HTML
<div class="whitebox_wrapper">
<div class="index_whitebox">
<div class="index_title">
title
</div>
<div class="index_image">
</div>
<div class="index_article">
<div class="index_first_cell_text_wrapper">
</div>
</div>
<div id="index_nav_container">
Contact
</div>
</div>
</div>
and same html for the other boxes.
Put this in your css file
#media screen and (max-width: 768px) {
.header{min-width:100%;}
#banner{min-width:100% !important;}
.whitebox_wrapper{min-width:100%;}
.index_wrapper{width:100%;}
}
it might help you
I am trying to justify some elements inside core-toolbar but I cannot get it to work.
here is my code:
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#core_card {
position: absolute;
width: 300px;
height: 300px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
left: 440px;
top: 90px;
background-color: rgb(255, 255, 255);
}
#core_toolbar {
right: 0px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
background-color: rgb(79, 125, 201);
}
#div {
display: block;
}
#core_icon_button {
display: block;
}
</style>
<core-card id="core_card" layout vertical>
<core-toolbar id="core_toolbar" horizontal layout justified>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div">Toolbar</div>
</core-toolbar>
</core-card>
</template>
Code result
Expected result
The issue is that the content you place inside of the core-toolbar is being pulled into a child div inside of core-toolbar's Shadow DOM.
<core-toolbar>
#shadow-root
...
<div id="topBar" class="toolbar-tools" center horizontal layout>
<content></content> <!-- your content is inside of here -->
</div>
Your layout attributes are not being applied to this child div, so you don't get the layout you'd expect.
The easiest way to get the layout you're after is to tell the child divs to flex
<core-toolbar>
<div flex>Foo</div>
<div flex>Bar</div>
<div>Baz</div>
</core-toolbar>
Here's a jsbin example
I'm making a title bar, links on the left, center, and the right. Each separated by divs.
Floating left is no problem, centering the second div is no problem. But when I try to float the last div to the right it is clearing the other divs and is not inside my header. Why is this? It has to be something simple I am missing? Thank you very much
http://jsfiddle.net/GX9xn/
HTML
<div class="header-fixed">
<div class="header-container">
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-center">
title
</div>
<div class="nav-float-right">
<a>
<span>more</span>
</a>
<div>
</div>
</div>
CSS
.header-fixed {
height:56px;
border-top: 1px solid #222;
width: 100%;
background: green;
position: fixed;
}
.header-container {
width: 700px;
margin: 0 auto;
height: 56px;
}
.nav-float-left {
float:left;
height: 56px;
color: rgba(255, 255, 255, .55);
font-family:'Museo Sans W01 300',san-serif;
font-size: 13px;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .95);
filter: dropshadow(color= rgba(0, 0, 0, .95), offx=0, offy=1);
}
.nav-center {
letter-spacing: 0.05em;
margin: 0 auto;
height: 43px;
width: 100px;
padding-top: 13px;
background: black;
color: #d4d2d2;
font-size: 29px;
font-family: “Lucida Grande”, sans-serif;
text-align: center;
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-webkit-box-shadow:inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-o-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
cursor: pointer;
}
.nav-center .ss-pika {
font-size: 17px;
margin-left: 1px;
margin-right: 0px;
}
.nav-center a {
display:block;
}
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
}
The center div will be above the float right div because it is a block element and block elements are not placed inline.
A walk around is to add the float-right element first.
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-float-right">
<a><span>more</span></a>
<div>
<div class="nav-center">
title
</div>
If you use float you also need to set the display property in order to do as you want.
I changed your fiddle by adding display:inline-block.
As you may notice you need to set the dimensions width for your divs (height optional).
Here : Fiddle
You can use display:table; , display:table-cell; instead of floats to arrange elements in single line:
Fiddle
Try this
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
bottom: 57px;
left: 12px;
}
You can adjust the right div by set the bottom and left attributes.
Fiddel: http://jsfiddle.net/GX9xn/6/
Please try this FIDDLE
There is slight change in your CSS file
.nav-float-right {
position:absolute;
float:right;
height: 55px;
width: 205px;
right:0;
top:0;
background: #fff;
}
I tried to implement fixed position header bar. But when I try to resize window to smaller width, right part of header is not shown.. If I changed position to absolute, problem is resolved but I'm losing the fixed effect of header bar..
#header {
position: fixed;
top: 0px;
display: block;
height:56px;
width: 100%;
padding-left: 0px;
background-color: #333333;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 99999;
}
here is the html;
<body>
<div id="mask"></div>
<div id="wrapper">
<div id="header">
<div id="center">
<a id="logoWrapper" href="/makale"><div id="logo"></div></a>
<div id="categoryWrapper">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="searchWrapper">
<div id="search">
<input type="text" />
<a id="searchBt" href="#"><img src="/images/site/search.png"></a>
</div>
</div>
</div>
</div>
<div id="content">...</div>
</div>
</body>
Here is the link http://sporapp.com/makale
i had the same problem some time ago. look at my older post up there -> Make Fixed Header Scroll Horizontal
you can use jQuery or Javascript to reposition the div on the top of the page ( causes some laggy effect sometimes )
hie, i have fixed your problem. You must have to add min-width property of css for #header portion while working on resizing window.
CSS:
#wrapper
{
background-color: #F4F4F4;
display: block;
height: auto;
min-height:100%;
min-width:980px;
overflow:auto;
width: 100%;
}
#header
{
backgroung-color: #333333;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
display: block;
height: 56px;
min-width: 1265px; // Here, if you want to adjust your min-width of header as per your need (for that you can use fire bug) else remains same
padding-left:0;
position: absolute;
top: 0;
z-index: 99999;
}
#header #center
{
margin: 0 auto;
width:980px;
}
Hope, it will helps you. Cheers. !!
Mark it as answer if it will helps you so that other can fix their same problem. Thanks. !!