Jump to content

Height doesn't change in css


Zendex
 Share

Recommended Posts

Hi,

I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.

 

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Zendex</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
</head>

<body>
    <div id="nav_bar">
        <div id="Zendex">ZENDEX</div>
<ul>
    <a href="contact.html"><li>CONTACT</li></a>
    <a href="films.html"><li>FILMS</li></a>
    <a href="about.html"><li>ABOUT</li></a>
    <a href="home.html"><li>HOME</li></a>
        </ul>
    </div>
    <div class="main"></div>
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background-color: #6A6969;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

#nav_bar{
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 125px;
    background-color: #484848;
    border: solid 1px black;
}

li{
    font-size: 24px;
    text-shadow: 1px 1px 100px white;
    font-family: 'Offside', cursive;
    float: right;
    margin: 45px 50px 0px 0px;
    height: 125px;
}

#Zendex{
    font-size: 24px;
    text-shadow: 1px 1px 100px white;
    font-family: 'Offside', cursive;
    float: left;
    margin: 45px 0px 0px 100px;
    color: azure;
}

#home{
    
}

#about{
    
}

#films{
    
}

#contact{
    
}

ul{
    margin: 0px 50px 0px 0px;
    color: azure;
    height: 125px;
}

a:link{
    color: white;
}

li:hover{
    height: 125px;
    background-color: #6A6969;
    color: white;
}
 

css problem.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Chris Bennett
      Hi all, have just upgraded to 3.0.184, a little late to the party.
      Not sure about a few things and would love to understand better.

      It seems to me like there is now an increased over-reliance on inline style width declarations on Inputfields.
      To me, they seem like extra bits of unnecessarily specific css that impede easily customisable CSS.
      I can't wrap my head around why they are needed.
      Surely CSS and flexbox can do this better, easier, with much greater flexibility, less javascript, less thread work, less bytes and less layout shifts?
      In previous versions, data-colwidth on everything with a width worked just fine.
      Was very easy to target li[data-colwidth] and use calc to add a margin if desired and use flexbox to flex like a champion, taking up available space.
      Lovely, simple, flexible and lightweight. 

      Now it seems some wrappers have a style="width: ..." where once they had data-colwidth and some Inputfields have data-original-width. 
      Each can technically be over-ridden using ...sigh... a multitude of repetitive !important declarations, but that is not ideal.
      Is there something I am missing? Is there a reason the inline width styles were needed?
      Is there a benefit I am unaware of? Can I help provide possible alternate solutions to whatever use case necessitated it?
      In a similar vein, I also got to see maxColHeightSpacer for the first time.
      Can't say it was a pleasure for it to appear.
      Similar to the use of inline style="width:..." on Inputfields, in the age of flexbox I don't understand why a spacer div with inline height is needed.
      Is there a need for it I just don't get? 
      Hadn't seen it before but found some info from a few years ago here:

      Anyway, I would honestly love any insight on any of this.
      Would love to understand the 'why' and, if possible, help. 
    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
       
      Thank you in advance!
    • By franciccio-ITALIANO
      Hi, I have created over twenty different templates for the same site.
      In all of them, the same long piece of html code appears. 
      Could someone suggest me the php code I need to write in the template files to link that piece of html code, which is always the same everywhere?
      What strategies could I use to link it?
      The problem is that this long piece of code that is identical everywhere, MAY change IN TIME. So, when I fix it, I would have to change it in all twenty template files.... 
       
    • By milo695
      Hello,
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
      thanks
    • By wwwouter
      Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
      <?php header("Content-type: text/css; charset: UTF-8"); header("Charset:utf-8"); if ($homepage->hero_image) { echo <<<CSS .hero { background: url($homepage->hero_image->url) no-repeat; } CSS; } ?> Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR] (My htaccess file is @version 3.0 and @htaccessVersion 301)
      This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR] I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
      I'm working on localhost, using MAMP (not sure if that's relevant).
      A bit more about what I want to do achieve specifically:
      I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change.
      I know I can achieve this like this:
      echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>"; But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
       
      P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
×
×
  • Create New...