I have nowhere indent from the header, but I don't know how to fix it?
<header class="page-header">
<section class="logo">
<i class="logo-img"> </i>
</section>
<section class="menu">
<ul class="main-menu">
<li>Главная</li>
<li>Правила</li>
<li>Тест</li>
<li>Список смотрителей</li>
</ul>
</section>
<section class="profile-avatar">
<img height="50px" width="50px" src="img/ava.png">
<ul class="profile-menu">
<li>
Профиль
</li>
<li>
Выйти
</li>
</ul>
</section>
</header>
If I add clearfix to the header it gives to him more height..
Code is here https://jsfiddle.net/tLtkmcy9/
Right solution is to add height to class with the float: right;
It is your class="profile-avatar" if you take him float right of it is not anymore like that you have to play with the height and it will be ok! try height: 50px;
Please try with the below code for the HTML mentioned below
style="position: relative;top: -4px;left: -4px;"
<section class="page-desc" style="
position: relative;
top: -4px;
left: -4px; ">
<p class="caution">Перед тем как подавать заявку на смотрителя, Вы должны пройти тест!</p>
</section>
Related
I am trying to move content within the first site-header-section child to the left as there is too much gap on the left hand side but I can't seem to shift it. What am I missing?
<div class="site-header-primary-section-left site-header-section ast-flex site-header-section-left">
<div class="ast-builder-layout-element ast-flex site-header-focus-item" data-section="title_tagline">
<div class="site-branding ast-site-identity" itemtype="https://schema.org/Organization" itemscope="itemscope">
<span class="site-logo-img"><img width="106" height="80" src="https://puffpastrydelights.com/wp-content/uploads/2021/04/puff-pastry-dellight.png" class="custom-logo" alt="Puff Pastry Delight" loading="lazy" srcset=""><img width="106" height="80" src="https://puffpastrydelights.com/wp-content/uploads/2021/04/puff-pastry-dellight-1.png" class="custom-logo" alt="" loading="lazy"></span>
<div class="ast-site-title-wrap">
<h1 class="site-title" itemprop="name">
<a href="https://puffpastrydelights.com/" rel="home" itemprop="url">
Pastry Delights
</a>
</h1>
<p class="site-description" itemprop="description">
Made with love, served with pride
</p>
</div>
</div>
<!-- .site-branding -->
</div>
<div class="ast-builder-layout-element ast-flex site-header-focus-item ast-header-html-1" data-section="section-hb-html-1">
<div class="ast-header-html inner-link-style-">
<div class="ast-builder-html-element">
<ul class="additional-menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.site-header-section:first-child{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
margin:0;
padding:0;
}
While it's not a completely responsive solution, you could resort to using
.site-header-section:first-child {
position: relative;
left: 0;
}
This should just move the div to be stuck against the left side of the screen. If that's to far left, try a higher value than 0 for the 'left' property, such as 10px.
You have padding-left: 20px in the div with this class names ast-primary-header-bar ast-primary-header main-header-bar site-primary-header-wrap site-header-focus-item ast-builder-grid-row-layout-default ast-builder-grid-row-tablet-layout-default ast-builder-grid-row-mobile-layout-default. If you cancel that, it would solve your problem.
The container is only about 3/4 of the screens height, which is not the same height as the child elements.
Why is that?
I tried to give the container and body a min-height: 100% but this doesn't work. Even with !important
I don't use bootstrap, just plain html and css.
Any help much appreciated!
EDIT: Changing the Body or html height doesn't work. This breaks the page.
I have a body with the following CSS:
body {
background-image: url("../img/1.png");
background-repeat: repeat;
background-size: cover;
font-family: "Raleway", sans-serif;
font-size: 20px;
font-weight: 300;
}
The container has this CSS rules:
.container {
width: 900px !important;
margin: auto;
padding-left: 20px;
padding-right: 20px;
background-color: rgba(255, 255, 255, 0.3);
height: 100% !important;
}
My markup looks like this:
<body>
<div class="container">
<div class="header">
<div class="lang">
<ul class="languages">
<li>DE</li>
<li>FR</li>
</ul>
</div>
<img src="img/header/royalpool.png" alt="" class="logo-royal"/>
<img src="img/header/bluetech.png" alt="" class="logo-bluetech"/>
<div class="lang">
<ul class="languages">
<li>Kontakt</li>
<li>Downloads</li>
<li>Händler</li>
</ul>
</div>
<ul class="navi">
<li>
<div class="box-q-1"><img src="img/header/i/pool.png" alt="" class=header-img/>
<p>Pool</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/filter.png" alt="" class=header-img/>
<p>Filteration</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/des.png" alt="" class=header-img/>
<p>Desinfection</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/cover.png" alt="" class=header-img/>
<p>Cover</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/solar.png" alt="" class=header-img/>
<p>Solar</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/pumpe.png" alt="" class=header-img/>
<p>Wärme-Pumpe</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/led.png" alt="" class=header-img/>
<p>LED</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/clean.png" alt="" class=header-img/>
<p>Clean</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/terasse.png" alt="" class=header-img/>
<p>Terasse</p>
</div>
</li>
</ul>
<div style="clear:both"></div>
</div>
<div class="box-title">
<p>Element-Betonbecken Premium</p>
</div>
<img src="img/page1/pool-top.png" class="pool-img" alt=""/>
<div class="box-small-title-right">
<p>Elementtreppen</p>
</div>
<div class="box-elementtreppen">
<div class="treppe">
<img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
<p>Ecktreppe</p>
</div>
<div class="treppe">
<img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
<p>Innen Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/ganz.png" alt="Eck" class="treppen-img"/>
<p>Ganze Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/rom.png" alt="Eck" class="treppen-img"/>
<p>Römische Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/gerade.png" alt="Eck" class="treppen-img"/>
<p>Gerade Treppe</p>
</div>
</div>
<div class="box-small-title-left">
<p>Varianten Wasserstand</p>
</div>
<img src="img/page1/normal.png" alt="" class="img-wasserstand first"/>
<div class="box-small-title-right">
<p>Bauphasen</p>
</div>
<div class="box-bauphasen"></div>
</div>
</body>
The body contains elements that are floated, they need clearing:
.container::before, .container::after {
content: '';
display: table;
}
.container::after {
clear: both;
}
More about understanding floats here: https://css-tricks.com/all-about-floats/
You need to add a height 100% on your body & HTML to make it work.
html, body {
height:100%;
}
You can find more details about this on this same question
try
html,body{
height:100%;
margin:0;
}
You should reset margin and padding as well on html and body.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
Hopefully that'll do it.
If you don't have to support old browsers (IE8 or before) you can achieve what you want setting the height with viewport units:
.container {
height: 100vh;
}
Check the compatibility here: http://caniuse.com/#search=vh
NOTE: If you have any concerns about this you'll have to look for the compatibility of the background-size:cover rule also...
try this it may work:
* {
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
.container {
height: 100%;
}
I'm trying to have a ul and a span elements to stick to the bottom of their containing div. The only way I managed to so is through setting them with position:relative and playing with bottom: x for each element separately (according to its size).
Is there a more standard way to do it?
Here is the code: jsfiddle
<div id="header">
<div id="top_menu">
<span id="logo">TechSystems</span>
<span id="sub_logo">think smarter</span>
<div id="menu_content">
<ul>
<li>home</li>
<li>about</li>
<li>contact us</li>
</ul>
</div>
</div>
</div>
<div id="slideshow">
</div>
Try adding to #menu_content:
#menu_content
{
position:fixed;
bottom: 0px;
}
See: https://jsfiddle.net/x7p35mrz/
Here I have a webpage. If I change the size of the browser window this happens: http://gyazo.com/1be5c2f9aae817d0fa2603a51bea5d37 and the smaller the browser window the closer the two banner elements get towards the centre.
I was wondering if anyone could help me stop these two elements from moving towards the centre when the browser window size is changed so that they're simular to the green and blue box on this site: https://woodycraft.net/home/
Here is my CSS Style sheet:
/*CSS FOR ALL PAGES*/
/*BODY/WRAPPER SECTION*/
body {background:url('E:/Documents/CRAFT412-Website/images/SiteBackground.png');
background-repeat: no-repeat;
background-attachment: fixed;}
#wrapper {width: 1000px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1px 5px;}
/*TOP BANNER SECTION*/
#logo {margin-top: -90px;
margin-bottom: -95px;
text-align: center;}
#ip {float: left;
margin-left: 458px;
margin-top: -55px;}
#ip_text {float: left;
margin-left: 449px;
margin-top: -51px;
color: white;
font-size: 15px;}
#teamspeak_logo {float:right;
margin-right: 450px;
margin-top: -55px;}
Also here is the HTML for that said page:
<!DOCTYPE HTML>
<html>
<head>
<title>CRAFT412 - Rules</title>
</head>
<!--PAGE LINKS-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/rules.css" rel="stylesheet" type="text/css" media="screen">
<!--HTML FOR ALL PAGES-->
<!--BODY SECTION-->
<body>
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip">
<img class="top" src="images/CRAFT412 - Box - IP.png" alt="IP">
</div>
<div id="ip_text">
<p>SERVER IP<P/>
<p>craft412.serveminecraft.net<P/>
</div>
<div id="teamspeak_logo">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK"></a>
</div>
</div>
<!--WRAPPER SECTION-->
<div id="wrapper">
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>Home
</li
><li>Status
</li
><li>Info
</li
><li>Gamemodes
<ul>
<li>Survival
</li
><li>Pure-PVP
</li
><li>Gamesworld
</li>
</ul>
</li
><li>Rules
</li
><li>Vote
</li
><li>Contact
</li>
</ul>
</div>
<!--RULES CONTENT-->
<div id="rules_title">
<h3>RULES</h3>
</div>
<div id="global_rules_info">
<h3>GLOBAL RULES</h3>
<p>Global rules follow across the entire server</p>
<p>All players are expected to comply to all of the listed rules or they will be muted, kicked, timed out or banned</p>
</div>
<div id="global_rules">
<h4>Rule listing:</h4>
<ul>
<li>No griefing</li>
<li>No flying. (Unless you've been given a high enough rank)</li>
<li>No unauthorized mod usage</li>
<li>No hacked clients</li>
<li>No cheating</li>
<li>Show all other players respect. Including staff</li>
<li>No begging for rank</li>
</ul>
<p>All rules are enforced by staff in a strict manner</p>
</div>
<div id="punishments">
<h4>Punishments can include:</h4>
<ul>
<li>Privilages taken away</li>
<li>Mutes</li>
<li>Prison (Survival)</li>
<li>Temporary bans</li>
<li>Permanent bans</li>
<li>IP bans</li>
</ul>
</div>
<div id="survival_rules_title">
<h3>SURVIVAL RULES</h3>
</div>
<div id="survival_rules">
<h4>Rule listing:</h4>
<ul>
<li>Global rules</li>
<li>Don't build to close to other peoples creations, keep a reasonable distance</li>
<li>No begging for materials</li>
</ul>
</div>
</div>
<!--HTML FOR ALL PAGES-->
<!--BOTTOM FOOTER SECTION-->
<div id="bottom_footer">
<div id="created_by">
<p>© 2015 GR412</p>
</div>
<div id="social_media_youtube">
<a href="https://www.youtube.com/user/GR412" target="_blank">
<img src="images/CRAFT412 - YouTube Button.png" width="40" height="40" alt="YOUTUBE"></a>
</div>
<div id="social_media_twitch">
<a href="http://www.twitch.tv/gr412" target="_blank">
<img src="images/CRAFT412 - Twitch Button.png" width="35" height="35" alt="TWITCH"></a>
</div>
<div id="social_media_twitter">
<a href="https://twitter.com/GR412" target="_blank">
<img src="images/CRAFT412 - Twitter Button.png" width="55" height="55" alt="TWITTER"></a>
</div>
<div id="social_media_facebook">
<a href="https://www.facebook.com/GR412" target="_blank">
<img src="images/CRAFT412 - Facebook Button.png" width="45" height="40" alt="FACEBOOOK"></a>
</div>
</div>
</body>
</html>
I presume you would like to keep the buttons from moving towards the center?
#ip_text {float: left;
margin-left: 449px; // Try remove this
margin-top: -51px;
color: white;
font-size: 15px;
}
#teamspeak_logo {float:right;
margin-right: 450px; // Try remove this
margin-top: -55px;
}
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}