Jump to content

CSS Layout


WOTS

Recommended Posts

Hello everyone,

 

I am new to HTML coding and having a problem with a CSS layout.  The instructions are below and my code at the very bottom.  The site I have entered it on says it is 75% done but I have gotten stuck and need a little push forward, so I am hoping you can help me.  The layout I need is attached in a pdf.  Any help you can offer would be welcomed.

 

Thank you ahead of time.

 

WOTS

 

Document Setup

Document Setup

Go to the cw_home.html and cw_styles.css files and enter your name and the date in the comment section of each file. In cw_styles.css file and at the top of the file, use the @import rule to import the contents of the cw_designs.css file, which contains several style rules that format the appearance of different page elements.

Go to the cw_home.html file and within the document head, insert a meta element that sets the browser viewport for use with mobile devices. Also, create links to cw_reset.css and cw_styles.css style sheets. Take some time to study the contents and structure of the document.

-------------------------------------------------------------------------

Styles

Navigation List

At the bottom of the home page is a navigation list with the id #bottom containing several ul elements. Sofia wants these ul elements laid out side-by-side. Create a style rule for the bottom navigation list displaying it as a flexbox row with no wrapping. Set the justify-content property so that the flex items are centered along the main axis. Be sure to include the WebKit browser extension in all of your flex styles.

Define flex values for ul elements within the bottom navigation list so that the width of those elements never exceeds 150 pixels but can shrink below that value.

-------------------------------------------------------------------------------

 

Mobile Devices

Mobile Media Query

Sofia wants more highly contrasting colors when the page is displayed in a mobile device. Create a media query for mobile screen devices with maximum widths of 480 pixels. Within that media query, insert a style rule that sets the font color of all body text to rgb(211, 211, 211) and sets the body background color to rgb(51, 51, 51).

Sofia also wants to reduce the clutter in the mobile version of the home page. Hide the following elements for mobile users:

  • the aside element,
  • any img element within the article element, and
  • the section#spotlight element.

Mobile Navigation Lists

At the top of the web page is a navigation list with the ID #top. For mobile devices, display the ul element within this navigation list as a flexbox row with wrapping. For each list item within this ul element, set the font size to 2.2em. Size the list items by setting their flex values to 1 for the growth and shrink rates and 130 pixels for the basis value.

Mobile Navigation List Items

Under the mobile layout, the six list items in the top navigation list should appear as square blocks with different background images. Using the selector nav#top ul li:nth-of-type(1) for the first list item, create a style rule that changes the background to the background image cw_image01.png. Center the background image with no tiling and size it so that the entire image is contained within the background.

Repeat the previous step for the next five list items using the same general format. Use the cw_image02.png file for background of the second list item, the cw_image03.png file for the third list item background, and so forth.

Mobile Hypertext and Hyperlink Styles

Sofia has placed hypertext links for the gallery’s phone number and e-mail address in a paragraph with the ID #links. For mobile users, she wants these two hypertext links spaced evenly within the paragraph that is displayed below the top navigation list. To format these links, create a style rule that displays the links paragraph as a flexbox row with no wrapping, then add a style that sets the value of the justify-content property of the paragraph to space-around.

She wants the telephone and e-mail links to be prominently displayed on mobile devices. For each a element within the links paragraph, apply the following style rule that:

  • displays the link text in white on the background color rgb(220, 27, 27),
  • sets the border radius around each hypertext to 20 pixels with 10 pixels of padding, and
  • removes any underlining from the hypertext links.

----------------

 

Tablet Media Query

Next, you’ll define the layout for tablet and desktop devices. Create a media query for screen devices whose width is 481 pixels or greater. Within this media query, display the page body as a flexbox in row orientation with wrapping.

Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by hiding this paragraph.

Tablet Element Styles

The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels.

Tablet Navigation Lists

For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule to display the top navigation list ul as a flexbox with a background color of rgb(51, 51, 51) and a height of 50 pixels. Use the justify-content and align-items property to center the flex items both horizontally and vertically.

Define the flex size of each list item in the top navigation list to have a maximum width of 80 pixels but to shrink at the same rate as the width if the navigation list is reduced.

 

 

CODE DONE SO FAR BELOW:  LAYOUT NOT WORKING IN MOBILE, TABLET OR DESKTOP.

 

@charset "utf-8";
@import url("cw_designs.css");

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 5
   Case Problem 3
   
   Author:   Rick Goldberg
   Date:    7/21/17  
   
   Filename: cw_styles.css

   This file contains the screen styles used with the
   Cauli-Wood Gallery home page

*/


/* Import Basic Design Styles  */

 

/* ===============================
    General Styles for All Devices
   ===============================
*/
nav#bottom{
  height:100%
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: auto;
  -webkit-display: flex;
  -webkit-flex-direction: row;
  flex-flow: row wrap;
}
 
  nav#bottom ul{
    flex: 1
    max-width: 150px;
}   

/* ===============================
    Mobile Styles up to 480 pixels
   ===============================
*/@media only screen and (max-width: 480px){
  body{
    color: rgb(211, 211, 211);
    background-color: rgb(51, 51, 51);
  }
 
  aside, article>img, #spotlight{
    display: none;
  }
 
  nav#top ul{
    display: flex;
    flex-wrap: row wrap;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
  }
 
  nav#top ul li{
    font-size: 2.2em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 130px;
  }
 
  nav#top ul li:nth-of-type(1){
    background: url(cw_image01.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
  }
    
    nav#top ul li:nth-of-type(2){
    background: url(cw_image02.png);
     background-repeat: no-repeat;
     background-size: cover;  
     background-position: center;
  }
     nav#top ul li:nth-of-type(3){
     background: url(cw_image03.png);
     background-repeat: no-repeat;
     background-size: cover;  
     background-position: center;
  }
     nav#top ul li:nth-of-type(4){
     background: url(cw_image04.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
  }
     nav#top ul li:nth-of-type(5){
     background: url(cw_image05.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
  }
     nav#top ul li:nth-of-type(6){
     background: url(cw_image06.png);
     background-repeat: no-repeat;
     background-size: cover;  
     background-position: center;
  }
 
  p#links{
    display: flex;
    flex-flow: no-wrap;
  }
 
    p#links a{
    color: white;
    background-color: rgb(220, 27, 27);
    border-radius: 20px;
    padding: 10px;
    margin: 0;
    text-decoration: none;
    align-content: space-between;
  }


/* ============================================
    Tablet and Desktop Devices: 481px or more
   ============================================
*/@media only screen and (min-width:481px){
  body{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-flow: row wrap;
  }
    p#links a{
    display: none:
  }
 article{
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 400px;
  }
 
aside{
    flex-grow: 1;
    flex-shrink: 2;
    flex-basis: 200px;
  }
 
#top nav.horizontal ul{
    display: flex;  
    line-height: 50px;
    height: 50px;
    background-color: rgb(51, 51, 51);
    justify-content: center;
    align-items: center;
  }
 
#top nav ul li{
    max-height: 50px;
    flex-shrink: 1;
    flex-grow: 1;
  }

 

 

 

Needed1.jpg

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
×
×
  • Create New...